Google Maps API V3 中具有两个或多个 KML 层的交互式图例答案

【问题标题】：Interactive legend in Google Maps API V3 with two or more KML layersGoogle Maps API V3 中具有两个或多个 KML 层的交互式图例
【发布时间】：2013-04-16 13:57:52
【问题描述】：

我对 JavaScript 和 Google Maps API（基本上是整个 web GIS 世界）还很陌生，我正在努力为几个 KML 图层（在这个例子中，只有两个）或类似的东西创建交互式图例 @ 987654321@ 但对于 KML 图层。

这是我的代码：

<script>
  var tocka = new google.maps.LatLng(46.150346, 15.863571);

  function initialize() {
    var neven = {
      center: tocka,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), neven);


    var ctaLayer = new google.maps.KmlLayer({
      url: 'https://dl.dropboxusercontent.com/u/126827789/kuce.kmz'

    });
    ctaLayer.setMap(map);

    var ctaLayer = new google.maps.KmlLayer({
      url: 'https://dl.dropboxusercontent.com/u/126827789/neven.kmz'
    });
    ctaLayer.setMap(map);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

所以.. 如果可能的话，我想添加一些复选框以在这两个 kml 文件之间切换？

欢迎任何帮助和建议。先感谢您，没有。

【问题讨论】：

标签： google-maps-api-3 gis kml

【解决方案1】：

因此，您实际上并不是在要求有关地图内容的图例，而只是一个切换选项。我从另一个问题 (Toggle KML Layers in Google Maps v3) 中得到了这个答案，但我清理了它，因为它最初对我不起作用。现在效果很好。这是我的一个：

// Define the kml layers 
var kml = {
    a: {
        name: "Elevation Contours",
        url:'https://website.com/id/LimaContours200.kml'},
    b: {
        name: "Districts",
        url: 'https://https://website.com/id/LimaDistricts.kml'},
c:{
       name: "CAPECO Zones",
   url: 'https://website.com/id/ZonasCapeco.kml'}}

function initialize(){
    var mapOptions ={
    zoom: 12,
    center: new google.maps.LatLng(-12.0456072,-76.9991801),
    mapTypeId: google.maps.MapTypeId.SATELLITE,};
    //Display the map
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    createTogglers();
    removeAll();
    startup();};

// 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, 'selector-b');}

【讨论】：