在谷歌地图api中切换kml [英] toggle kml in google maps api

查看：122
本文介绍了在谷歌地图api中切换kml的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在开发一个包含单个KML图层的地图。但是，一旦它嵌入到网站中，我需要用户能够打开和关闭KML。我试图使用其他问题的建议代码来完成这项工作，但我没有任何运气。我真的很感谢任何人的帮助，找到解决办法。



这是我的代码。您会注意到我也有一个可拖动的标记，当它移动时，它会更改地图底部的GPS坐标：

< HTML>< HEAD> < meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/> < script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script> < script type =text / javascript> var geocoder = new google.maps.Geocoder（）;函数geocodePosition（pos）{geocoder.geocode（{latLng：pos}，function（responses）{if（responses&& response.length> 0）{updateMarkerAddress（responses [0] .formatted_address）;} else {updateMarkerAddress （'无法确定此地点的地址。'）;}}）; } function updateMarkerStatus（str）{document.getElementById（'markerStatus'）。innerHTML = str; }函数updateMarkerPosition（latLng）{document.getElementById（'info'）。innerHTML = [latLng.lat（），latLng.lng（）] .join（'，'）; }函数updateMarkerAddress（str）{document.getElementById（'address'）。innerHTML = str; } function initialize（）{var latLng = new google.maps.LatLng（-23.742023，29.462218）; var markerPosition = new google.maps.LatLng（-23.460136,31.3189074）; var map = new google.maps.Map（document.getElementById（'mapCanvas'），{zoom：7，center：latLng，mapTypeId：google.maps.MapTypeId.TERRAIN}）; var marker = new google.maps.Marker（{position：markerPosition，title：'Point A'，map：map，draggable：true}）; //更新当前位置信息。 updateMarkerPosition（的latLng）; geocodePosition（的latLng）; //添加拖动事件监听器。 google.maps.event.addListener（marker，'dragstart'，function（）{updateMarkerAddress（'DRAGGING ...'）;}）; google.maps.event.addListener（marker，'drag'，function（）{updateMarkerStatus（'DRAGGING ...'）; updateMarkerPosition（marker.getPosition（））;}）; google.maps.event.addListener（marker，'dragend'，function（）{updateMarkerStatus（'DRAG& DROP MARKER ON YOUR DESIRED PROPERTY'）; geocodePosition（marker.getPosition（））;}）; var kmlLayer = new google.maps.KmlLayer（）; var kmlUrl ='https://dl.dropboxusercontent.com/u/29079095/Limpopo_Hunting_Zones/Zones_2015.kml'; var kmlOptions = {suppressInfoWindows：false，preserveViewport：true，map：map}; var kmlLayer = new google.maps.KmlLayer（kmlUrl，kmlOptions）; } //载入处理程序来关闭应用程序。 google.maps.event.addDomListener（窗口，'load'，初始化）; < /脚本>< /头><身体GT; <风格> #mapCanvas {width：1000px;身高：500px; float：top; } #infoPanel {float：top; margin-left：10px; } #infoPanel div {margin-bottom：5px; }< / style> < div id =mapCanvas>< / div> < div id =infoPanel> < b> MARKER STATUS：< / b> < div id =markerStatus>< i> DRAG&将标记放在您想要的物业上。< / i> < / DIV> < b> GPS协调：< / b> < div id =info>< / div> < / div>< / body>< / html>

h2_lin>解决方案

您需要将地图全局化才能在通过点击侦听器运行的函数中使用它。



工作代码片段，基于这个问题的答案： div class =snippet-code>

< html>< head> < meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/> < script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script> < script type =text / javascript> var map = null; var geocoder = new google.maps.Geocoder（）; var layers = []; layers [0] = new google.maps.KmlLayer（https://dl.dropboxusercontent.com/u/29079095/Limpopo_Hunting_Zones/Zones_2015.kml，{preserveViewport：true}）;函数toggleLayers（i）{if（layers [i] .getMap（）== null）{layers [i] .setMap（map）; } else {layers [i] .setMap（null）; }}函数geocodePosition（pos）{geocoder.geocode（{latLng：pos}，function（responses）{if（responses&& response.length> 0）{updateMarkerAddress（responses [0] .formatted_address）;} else {updateMarkerAddress（'Can not determine address at this location。'）;}}）; } function updateMarkerStatus（str）{document.getElementById（'markerStatus'）。innerHTML = str; }函数updateMarkerPosition（latLng）{document.getElementById（'info'）。innerHTML = [latLng.lat（），latLng.lng（）] .join（'，'）; }函数updateMarkerAddress（str）{document.getElementById（'address'）。innerHTML = str; } function initialize（）{var latLng = new google.maps.LatLng（-23.742023，29.462218）; var markerPosition = new google.maps.LatLng（-23.460136,31.3189074）; map = new google.maps.Map（document.getElementById（'mapCanvas'），{zoom：7，center：latLng，mapTypeId：google.maps.MapTypeId.TERRAIN}）; var marker = new google.maps.Marker（{position：markerPosition，title：'Point A'，map：map，draggable：true}）; //更新当前位置信息。 updateMarkerPosition（的latLng）; geocodePosition（的latLng）; //添加拖动事件监听器。 google.maps.event.addListener（marker，'dragstart'，function（）{updateMarkerAddress（'DRAGGING ...'）;}）; google.maps.event.addListener（marker，'drag'，function（）{updateMarkerStatus（'DRAGGING ...'）; updateMarkerPosition（marker.getPosition（））;}）; google.maps.event.addListener（marker，'dragend'，function（）{updateMarkerStatus（'DRAG& DROP THE MARKER ON your DESIRED PROPERTY'）; geocodePosition（marker.getPosition（））;}）; / * var kmlUrl ='https://dl.dropboxusercontent.com/u/29079095/Limpopo_Hunting_Zones/Zones_2015.kml'; var kmlOptions = {suppressInfoWindows：false，preserveViewport：true，map：map}; var kmlLayer = new google.maps.KmlLayer（kmlUrl，kmlOptions）; * /} //载入处理程序以关闭应用程序。 google.maps.event.addDomListener（窗口，'load'，初始化）; < /脚本> <风格> #mapCanvas {width：1000px;身高：500px; float：top; } #infoPanel {float：top; margin-left：10px; } #infoPanel div {margin-bottom：5px; < / style>< / head>< body> Layer1< input type =checkboxid =layer_01onclick =toggleLayers（0）;/> < div id =mapCanvas>< / div> < div id =infoPanel> < div id =address>< / div> < b> MARKER STATUS：< / b> < div id =markerStatus>< i> DRAG&将标记放在您想要的物业上。< / i> < / DIV> < b> GPS协调：< / b> < div id =info>< / div> < / div>< / body>< / html>

I am developing a map with a single KML layer. But once it's embedded on a website, I need the user to be able to toggle the KML on and off. I have tried to use suggested code from other questions to make this work, but I'm not having any luck. I'd really appreciate anyone's help in finding a solution to this.

Here is my code. You'll notice that I also have a draggable marker, which when it's moved, changes the GPS co-ordinates at the bottom of the map: 

<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    var geocoder = new google.maps.Geocoder();

    function geocodePosition(pos) {
      geocoder.geocode({
        latLng: pos
      }, function(responses) {
        if (responses && responses.length > 0) {
          updateMarkerAddress(responses[0].formatted_address);
        } else {
          updateMarkerAddress('Cannot determine address at this location.');
        }
      });
    }

    function updateMarkerStatus(str) {
      document.getElementById('markerStatus').innerHTML = str;
    }

    function updateMarkerPosition(latLng) {
      document.getElementById('info').innerHTML = [
        latLng.lat(),
        latLng.lng()
      ].join(', ');
    }

    function updateMarkerAddress(str) {
      document.getElementById('address').innerHTML = str;
    }

    function initialize() {
      var latLng = new google.maps.LatLng(-23.742023, 29.462218);
      var markerPosition = new google.maps.LatLng(-23.460136, 31.3189074);
      var map = new google.maps.Map(document.getElementById('mapCanvas'), {
        zoom: 7,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });
      var marker = new google.maps.Marker({
        position: markerPosition,
        title: 'Point A',
        map: map,
        draggable: true
      });

      // Update current position info.
      updateMarkerPosition(latLng);
      geocodePosition(latLng);

      // Add dragging event listeners.
      google.maps.event.addListener(marker, 'dragstart', function() {
        updateMarkerAddress('DRAGGING...');
      });

      google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('DRAGGING...');
        updateMarkerPosition(marker.getPosition());
      });

      google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY');
        geocodePosition(marker.getPosition());
      });

      var kmlLayer = new google.maps.KmlLayer();

      var kmlUrl = 'https://dl.dropboxusercontent.com/u/29079095/Limpopo_Hunting_Zones/Zones_2015.kml';
      var kmlOptions = {
        suppressInfoWindows: false,
        preserveViewport: true,
        map: map
      };
      var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
    }

     // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <style>
    #mapCanvas {
      width: 1000px;
      height: 500px;
      float: top;
    }
    #infoPanel {
      float: top;
      margin-left: 10px;
    }
    #infoPanel div {
      margin-bottom: 5px;
    }
  </style>

  <div id="mapCanvas"></div>
  <div id="infoPanel">
    <b>MARKER STATUS:</b>
    <div id="markerStatus"><i>DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY.</i>
    </div>
    <b>GPS CO-ORDINATES:</b>
    <div id="info"></div>
  </div>
</body>

</html>

解决方案

You need the map to be global to use it inside functions run by click listeners.

Working code snippet, based of the answer to this question:

<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    var map = null;
    var geocoder = new google.maps.Geocoder();
    var layers=[];
    layers[0] = new  google.maps.KmlLayer("https://dl.dropboxusercontent.com/u/29079095/Limpopo_Hunting_Zones/Zones_2015.kml",
 {preserveViewport: true});

    function toggleLayers(i)
    {
        if(layers[i].getMap()==null){
           layers[i].setMap(map);
        }
        else {
           layers[i].setMap(null);
        }
    }

    function geocodePosition(pos) {
      geocoder.geocode({
        latLng: pos
      }, function(responses) {
        if (responses && responses.length > 0) {
          updateMarkerAddress(responses[0].formatted_address);
        } else {
          updateMarkerAddress('Cannot determine address at this location.');
        }
      });
    }

    function updateMarkerStatus(str) {
      document.getElementById('markerStatus').innerHTML = str;
    }

    function updateMarkerPosition(latLng) {
      document.getElementById('info').innerHTML = [
        latLng.lat(),
        latLng.lng()
      ].join(', ');
    }

    function updateMarkerAddress(str) {
      document.getElementById('address').innerHTML = str;
    }

    function initialize() {
      var latLng = new google.maps.LatLng(-23.742023, 29.462218);
      var markerPosition = new google.maps.LatLng(-23.460136, 31.3189074);
      map = new google.maps.Map(document.getElementById('mapCanvas'), {
        zoom: 7,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });
      var marker = new google.maps.Marker({
        position: markerPosition,
        title: 'Point A',
        map: map,
        draggable: true
      });

      // Update current position info.
      updateMarkerPosition(latLng);
      geocodePosition(latLng);

      // Add dragging event listeners.
      google.maps.event.addListener(marker, 'dragstart', function() {
        updateMarkerAddress('DRAGGING...');
      });

      google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('DRAGGING...');
        updateMarkerPosition(marker.getPosition());
      });

      google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY');
        geocodePosition(marker.getPosition());
      });
/*
      var kmlUrl = 'https://dl.dropboxusercontent.com/u/29079095/Limpopo_Hunting_Zones/Zones_2015.kml';
      var kmlOptions = {
        suppressInfoWindows: false,
        preserveViewport: true,
        map: map
      };
      var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
*/
    }

     // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  <style>
    #mapCanvas {
      width: 1000px;
      height: 500px;
      float: top;
    }
    #infoPanel {
      float: top;
      margin-left: 10px;
    }
    #infoPanel div {
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
  <div id="mapCanvas"></div>
  <div id="infoPanel">
    <div id="address"></div>
    <b>MARKER STATUS:</b>
    <div id="markerStatus"><i>DRAG & DROP THE MARKER ONTO YOUR DESIRED PROPERTY.</i>
    </div>
    <b>GPS CO-ORDINATES:</b>
    <div id="info"></div>
  </div>
</body>

</html>

这篇关于在谷歌地图api中切换kml的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆