在 Google 地图 v3 中切换 KML 图层答案

【问题标题】：Toggle KML Layers in Google Maps v3在 Google 地图 v3 中切换 KML 图层
【发布时间】：2012-04-08 22:47:30
【问题描述】：

是否有一种简单的方法来设置复选框以切换（打开/关闭）Google Maps v3 的 KML 图层？我遇到过these articles，但没有一个对我有用。

【问题讨论】：

【解决方案1】：

对不起，我的文章对你不起作用，它有点过时了。

这是一个典型 Gmaps 切换的完整示例，假设您使用的是 kml 文件。

<html>
<head>

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

var map;

// lets define some vars to make things easier later
var kml = {
    a: {
        name: "MPLS/STPL",
        url: "https://maps.google.com/maps/ms?authuser=0&vps=5&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004b06640255267e038c"
    },
    b: {
        name: "Bicycling Tour Routes",
        url: "https://maps.google.com/maps/ms?authuser=0&vps=4&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004902a1824bbc8c0fe9"
    }
// keep adding more if ye like 
};

// initialize our goo
function initializeMap() {
    var options = {
        center: new google.maps.LatLng(44.9812, -93.2687),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), options);

    createTogglers();
};

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

// the important function... kml[id].xxxxx refers back to the top 
function toggleKML(checked, id) {

    if (checked) {

        var layer = new google.maps.KmlLayer(kml[id].url, {
            preserveViewport: true,
            suppressInfoWindows: true 
        });
        // store kml as obj
        kml[id].obj = layer;
        kml[id].obj.setMap(map);
    }
    else {
        kml[id].obj.setMap(null);
        delete kml[id].obj;
    }

};

// create the controls dynamically because it's easier, really
function createTogglers() {

    var html = "<form><ul>";
    for (var prop in kml) {
        html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
        " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
        kml[prop].name + "<\/li>";
    }
    html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
    "Remove all layers<\/a><\/li>" + 
    "<\/ul><\/form>";

    document.getElementById("toggle_box").innerHTML = html;
};

// easy way to remove all objects
function removeAll() {
    for (var prop in kml) {
        if (kml[prop].obj) {
            kml[prop].obj.setMap(null);
            delete kml[prop].obj;
        }

    }
};


// Append Class on Select
function highlight(box, listitem) {
    var selected = 'selected';
    var normal = 'normal';
    document.getElementById(listitem).className = (box.checked ? selected: normal);
};

function startup() { 
// for example, this toggles kml b on load and updates the menu selector
var checkit = document.getElementById('b');
checkit.checked = true;
toggleKML(checkit, 'b');
highlight(checkit, 'selector1');
 }

</script>

<style type="text/css">
.selected { font-weight: bold; }
</style>

</head>
<body onload="startup()">
<div id="map_canvas" style="width: 100%; height: 600px;"></div>
<div id="toggle_box" style="position: absolute; top: 100px; right: 20px; padding: 10px; background: #fff; z-index: 5; "></div>
</body>
</html>

这是纯 js，所以当然使用 jQuery 可以让事情变得更简单。希望这会有所帮助！

【讨论】：

工作完美，但点击图层不弹出属性表..为什么？？
你是说信息窗口？将 suppressInfoWindows: true 设置为 false -- 我鼓励人们阅读 Google 文档，它实际上包含您需要知道的所有内容！ developers.google.com/maps/documentation/javascript/3.exp/…

【解决方案2】：

对于切换 kml 层，您可以尝试此功能：

/** Toggles layer
* @param {google.maps.KmlLayer} layer
* @param {google.maps.Map} map
**/ 
function toggleLayer( layer, map ){
     layer.setMap( layer.getMap() ? null : map );
}

将您的图层存储在数组中以进行更多操作（例如切换）。

然后你可以通过它在该数组上的索引来切换层：

toggleLayer( layersArray[index], map );

或将切换应用到所有层：

for( var index = 0; index < layersArray.length; ++index){
    toggleLayer( layersArray[index], map );
}

【讨论】：

如果我有两层怎么办？这还能用吗？还是我需要创建两个单独的函数？抱歉，我是 JavaScript 初学者。