保留 Google 地图在复选框单击时缩放到 kml 图层

Preserving Google map zoom to kml layer on checkbox click

本文关键字:缩放 kml 图层 单击 Google 地图 复选框 保留      更新时间:2023-09-26

我正在尝试将多个 kml 图层添加到地图中,这些图层可以通过复选框打开和关闭。我让那部分工作(耶!当我单击某个图层将其打开时,它会放大(这很好),但是当我取消单击以关闭该图层时,它会缩小到我的地图范围。如何让它保留上次加载图层的缩放?下面的代码。

<script>
var map;
var watershedLayer = new google.maps.KmlLayer ({
url: 'http://mvihes.bc.ca/mapping/watersheds.kmz'
});
var ere1949Layer = new google.maps.KmlLayer ({
url: 'http://mvihes.bc.ca/mapping/ere1949.kmz'
});
function initialize() {
var parksville= new google.maps.LatLng(49.316786, -124.308768);
var mapOptions = {
zoom: 9,
center: parksville
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
check();
}
function check()
{
    if(document.getElementById('watersheds').checked)
      {watershedLayer.setMap(map);}
    else
      {watershedLayer.setMap(null);}
    if(document.getElementById('ere1949').checked)
      {ere1949Layer.setMap(map);}
    else
      {ere1949Layer.setMap(null);}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

我尝试使用 preserveViewport 函数,但它只是阻止图层放大,这不是我想要的。我是javaScript的新手,所以可能我错过了一些明显的东西......任何帮助将不胜感激!

斯菲德尔

仅当尚未

设置所选图层的 map-属性时,才对其进行设置:

function check()
{
    if(document.getElementById('watersheds').checked)
      {if(!watershedLayer.getMap())watershedLayer.setMap(map);}
    else
      {watershedLayer.setMap(null);}
    if(document.getElementById('ere1949').checked)
      {if(!ere1949Layer.getMap())ere1949Layer.setMap(map);}
    else
      {ere1949Layer.setMap(null);}
}

http://jsfiddle.net/jhagmq7L/16/

您还可以将最大和最小缩放级别附加到地图,这是加载 kml 图层时要考虑的整体地图缩放。

// sets the min and max zoom levels of the map
    var opt = { minZoom: 6, maxZoom: 18 };
    map.setOptions(opt);