Javascript 为每个级别设置事件缩放谷歌地图？_Javascript_Google Maps

Javascript 为每个级别设置事件缩放谷歌地图？

javascript google-maps

Javascript 为每个级别设置事件缩放谷歌地图？,javascript,google-maps,Javascript,Google Maps,当我缩放每个级别的google地图时，如何指定加载一个kml文件？这是我的代码： <!DOCTYPE html> <html> <head> <title>Getting Properties With Event Handlers</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <met

当我缩放每个级别的google地图时，如何指定加载一个kml文件？这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Getting Properties With Event Handlers</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        #map {
            height: 100%;
        }
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var kmlLayer;
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 8,
                center: { lat: 10.89779, lng: 106.64619 }
            });

            map.addListener('idle', function () {
                if (map.getZoom() == 9) {
                    //alert('aa');
                    kmlLayer = new google.maps.KmlLayer({
                        url: 'a.kml',
                        map: map
                    });
                }
                else if (map.getZoom() == 10) {
                     kmlLayer = new google.maps.KmlLayer({
                        url: 'b.kml',
                        map: map
                }
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API&callback=initMap">
    </script>
</body>

</html>


使用事件处理程序获取属性
#地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
var kmlLayer；
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：8，
中心：{lat:10.89779，lng:106.64619}
});
map.addListener（'idle'，函数（）{
if（map.getZoom（）==9）{
//警报（“aa”）；
Kmlayer=new google.maps.Kmlayer({
url:'a.kml'，
地图：地图
});
}
else if（map.getZoom（）==10）{
Kmlayer=new google.maps.Kmlayer({
url:'b.kml'，
地图：地图
}
});
}

这意味着当

map.getZoom（）==9

时，地图将按文件

a.kml

map绘制。getZoom（）==10

将按

b.kml

文件绘制，由

a.kml

文件创建的所有细节将被删除

但是当使用

a.kml

文件创建缩放和细节时，上面的代码不会平滑。当

Map.getZoom（）==10

时，它不会被删除

请帮助我解决此问题。谢谢

在显示新的Kmlayer之前，您需要隐藏现有Kmlayer。例如：

var kmlLayer;
map.addListener('idle', function () {
    if (map.getZoom() == 9) {
        if (kmlLayer && kmlLayer.setMap) kmlLayer.setMap(null);
        kmlLayer = new google.maps.KmlLayer({
            url: 'a.kml',
            map: map
        });
    }
    else if (map.getZoom() == 10) {
         if (kmlLayer && kmlLayer.setMap) kmlLayer.setMap(null);
         kmlLayer = new google.maps.KmlLayer({
            url: 'b.kml',
            map: map
         });
    }

（如果为所有缩放级别定义了Kmlayers，则可能需要将隐藏现有图层的代码移动到

if

之外）