个人中心
gpt4 book ai didi

javascript - 在 Maps API 中切换 kml 图层

转载 作者：行者123 更新时间：2023-11-30 10:01:35 25 4
gpt4 key购买 nike

我现在正在尝试添加使用复选框选项切换 kmls 的功能，以便用户将 kmls 添加到已经默认加载了几个 kmls 的 map 。

我使用这篇帖子的建议来扩展我自己的脚本 - Toggle multiple KML/KML layers in google maps API v3但是以非常简单的方式添加它是行不通的。有没有人有什么建议？感谢您的关注。

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

 <script>     
    // layers to toggle 

        var layers=[];

    layers[0] = new  google.maps.KmlLayer('https://example.com/kmz/groundWater_well_2010.kml',
    {preserveViewport: true});

    layers[1] = new google.maps.KmlLayer('https://example.com/kmz/snowPole_2010.kml',
    {preserveViewport: true});
    var map;

    // end layers to toggle 
    // intialize 

    function initialize() {
    var myLatlng = new google.maps.LatLng(0,0);
        var mapOptions = {
          zoom: 1,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.SATELLITE
        };


      var map = new google.maps.Map(document.getElementById('map'), mapOptions);

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

      var sitesLayer = loadKml({
        url: 'https://example.com/kmzbasins.kml',
        map:map
      });

      var basinLayer = loadKml({
        url: 'https://example.com/kmz/boundries.kml',
          map:map
      });

      // toggle layers at the beginning

    function toggleLayers(i,theMap)
    {

     if(layers[i].getMap()==null) {
         layers[i].setMap(theMap);
      }
      else {
         layers[i].setMap(null);
    }
      document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>";
    }
    // end toggle layers 

    }

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

        </script>

然后在 body 里我有-

<body onload="initialize()">

    <div id="map"></div>
    Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
    Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>

最佳答案

你有两个选择:

  1. 将您的 map 变量设置为全局变量(它当前是您的初始化函数的本地变量)，并将 toggleLayers 函数也设置为全局变量(它们必须是全局变量才能在 HTML 点击处理程序中使用)。

proof of concept fiddle

  1. 使用 google.maps.event.addDomListener 将点击监听器添加到复选框，将所有内容保留在初始化函数的本地。

proof of concept fiddle

代码片段:

// layers to toggle 
var layers = [];

layers[0] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml', {
  preserveViewport: true
});

layers[1] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml', {
  preserveViewport: true
});

// end layers to toggle 
// intialize 

function initialize() {
  var myLatlng = new google.maps.LatLng(40, -110);
  var mapOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

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

  function toggleLayers(i) {
      if (layers[i].getMap() == null) {
        layers[i].setMap(map);
      } else {
        layers[i].setMap(null);
      }
      google.maps.event.addListener(layers[i], 'status_changed', function() {

        document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>";
      });
    }
    // end toggle layers
  google.maps.event.addDomListener(document.getElementById('layer_01'), 'click', function(evt) {
    toggleLayers(0);
  });
  google.maps.event.addDomListener(document.getElementById('layer_02'), 'click', function(evt) {
    toggleLayers(1);
  });
  // toggle layers at the beginning
  toggleLayers(0);
  toggleLayers(1);
}

google.maps.event.addDomListener(window, 'load', initialize);
body,
html,
#map {
  height: 100%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
Layer1
<input type="checkbox" id="layer_01" checked="checked" />Layer2
<input type="checkbox" id="layer_02" checked="checked" />
<div id="map"></div>
<div id="status"></div>

关于javascript - 在 Maps API 中切换 kml 图层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31348218/

25 4 0
文章推荐： javascript - SetInterval 重跑函数
文章推荐： java - 如何禁用在 EditText 中选择单词的双击？
文章推荐： javascript - 两个函数的区别
文章推荐： javascript - 使用attr()方法，将属性作为键值对象或直接传递时，哪种方法在jQuery中添加属性时执行最快？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com