时间戳

首页 > 解决方案 > 为每个级别缩放谷歌地图设置事件？

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

问题描述

当我缩放每一级谷歌地图时，如何指定加载一个 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>

这意味着什么时候map.getZoom() == 9，地图将按文件绘制a.kml。Map.getZoom() == 10将按文件绘制，b.kml文件创建的所有细节a.kml都将被删除。

但是当文件创建缩放和细节时，我上面的代码并不平滑a.kml。时不删除Map.getZoom() == 10。

请帮我解决这个问题。谢谢

标签： javascriptgoogle-maps

解决方案

您需要在显示新的 KmlLayer 之前隐藏现有的 KmlLayer。就像是：

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
         });
    }

（如果您为所有缩放级别定义了 KmlLayers，您可能希望将隐藏现有图层的代码移到if.

概念证明小提琴

推荐阅读