如何初始化谷歌地图图层

How to Initialize Google Maps Layers

本文关键字：图层谷歌地图初始化更新时间：2023-09-26

我有一个带有从sql文档加载的pin的谷歌地图页面。但是，我无法初始化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>

嘿，伙计们，我发现我做错了什么。我从未将地图设置为全局变量！您需要从映射中取出var，然后在初始化函数之外定义映射

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

这就是为什么在页面底部，它没有在我的toggleLayers函数上加载SetMap。