如何初始化Google Maps图层

Question

我有这个google maps页面，其中包含从sql文档加载的图钉。 但是，我无法初始化KML层。 我认为这与没有初始化复选框功能的加载主体有关？

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>index</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

     var layers=[];

        layers[0] = new  google.maps.KmlLayer('http://www.hpc.ncep.noaa.gov/kml/fop/fopbody.kml',
                {preserveViewport: true});

        layers[1] = new google.maps.KmlLayer('http://www.nhc.noaa.gov/gis/forecast/archive/latest_wsp34knt120hr_tenthDeg.kmz',
                {preserveViewport: true});

        layers[2] = new google.maps.KmlLayer('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month_depth_link.kml',
                {preserveViewport: true});

        layers[3] = new google.maps.KmlLayer('http://activefiremaps.fs.fed.us/data/kml/conus_latest_lg_incidents.kml',
                {preserveViewport: true});

        layers[4] = new google.maps.KmlLayer('http://w1.weather.gov/tcig/Tornado.kml?random=115233',
                {preserveViewport: true});



    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 5,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("maps_xml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    function toggleLayers(i)

        {

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

  <body onload="load()">
    <div id="map" style="width: 800px; height: 800px"></div>
    Flood <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
Hurricane<input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
Earthquake<input type="checkbox" id="layer_03" onclick="toggleLayers(2);"/>
Fire<input type="checkbox" id="layer_04" onclick="toggleLayers(3);"/>
Tornado<input type="checkbox" id="layer_05" onclick="toggleLayers(4);"/>
  </body>
</html>

Answer 1

嗨，我发现我做错了。 我从未将地图设置为全局变量！ 您需要从地图中取出var，然后在initialize函数之外定义地图

   var map;
   function load() {
   map = new google.maps.Map(document.getElementById("map"), {

这就是为什么在页面底部它没有在我的切换图层功能上加载SetMap的原因。

如何初始化Google Maps图层

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-10-31 16:08:36

如何初始化Google Maps图层

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-10-31 16:08:36

解决方案1
0 已采纳 2014-10-31 16:08:36