要在缩放后保持自定义谷歌地图覆盖瓦片可见,您可以使用Google Maps JavaScript API提供的MapType
对象和getTile
方法来自定义地图图层,并根据缩放级别动态加载适当的瓦片。
以下是一个示例代码,演示如何实现此功能:
// 创建自定义地图图层
var customMapType = new google.maps.MapType({
getTileUrl: function(coord, zoom) {
// 根据缩放级别动态加载瓦片
return 'http://example.com/tiles/' + zoom + '/' + coord.x + '/' + coord.y + '.png';
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 18,
minZoom: 5,
name: 'Custom Map'
});
// 创建地图并设置自定义地图图层
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.7128, lng: -74.0060},
zoom: 12,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'custom']
}
});
// 将自定义地图图层添加到地图
map.mapTypes.set('custom', customMapType);
map.setMapTypeId('custom');
在上面的示例中,getTileUrl
方法根据缩放级别和瓦片坐标返回瓦片的URL。您需要根据自己的需求替换此方法中的URL。
请注意,上述示例中的map
元素应该是一个具有指定ID的HTML元素。
希望这可以帮助到您!