Question

我想创建一个带有可切换KML图层的Google地图 - 每个图层都有一组图标。我想要使用的地图示例here。

我无法在地图上设置单独的图层，因此我可以继续逐个进行切换。

这是我在Google地图上获取KML图层数据的步骤：

1. Select "Download KML" 
2. I chose a layer ("Food stores" for example)
- I checked "Keep data up to date with network link KML" (Map will be maintained on Google maps and data should automatically refresh in my map on the website).
- I left unchecked "Export to a KML file" (because of the icons support)

然后我解压缩下载的文件。在小代码内部有<href>http://www.google.com/maps/d/kml?mid=16i6f7Jvm754_jzkltP-Ks_2pKbU&lid=M97Oy53L0t4</href>，当我在下面的代码底部传递函数sitesLayer的数据时，我将其包含在loadKml()的网址中。

这个问题是我立即在地图上获得所有这些图标，即使我已下载并仅包含1个图层 - 地图显示所有4个图标。我在代码或下载KML文件以分离图层/图标的步骤中遗漏了什么吗？

function initialize() {

    // Map settings
    var myLatlng = new google.maps.LatLng(0,0);
    var mapOptions = {
        zoom: 18,
        center: myLatlng
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);


    // Creating KML layers
    loadKml = function(opts,map){

        var layer = new google.maps.KmlLayer();
        opts.preserveViewport = true;
        if(map) {
            opts.map = map;
        }

        google.maps.event.addListener(layer,'defaultviewport_changed',function() {
            var map=this.getMap(),
            bounds=map.get('kmlBounds') || this.getDefaultViewport();

            bounds.union(this.getDefaultViewport());
            map.set('kmlBounds',bounds);
            map.fitBounds(bounds); 
        });

        layer.setOptions(opts);
        return layer; 

    }

    // Setting KML layers
    var sitesLayer = loadKml({
        url: 'http://www.google.com/maps/d/kml?mid=1AQ5Is7NjBGjPZpLji5fbApYnegk&amp;lid=z-AEWAAfH9c',
        map: map
    });

    var sitesLayer2 = loadKml({
        url: 'http://www.google.com/maps/d/kml?mid=16i6f7Jvm754_jzkltP-Ks_2pKbU&amp;lid=jY6tGqHtk80',
        map: map
    });

}


google.maps.event.addDomListener(window, 'load', initialize);

使用自定义图标在GoogleMaps上设置多个可切换的KML图层

0 个答案: