标记不显示在谷歌地图API

Markers not showing in Google Maps API

本文关键字:谷歌地图 API 显示      更新时间:2023-09-26

我刚刚将以下代码加载到我的网页中,经过许多小时的故障排除,我无法获得标记显示?

我已经确认解析php文件正在工作。

Javascript:

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var customIcons = {
  accom: {
    icon: 'images/google_map_icon_green.png'
  },
  food: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
  }
};
  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(
      <?php if ($_COOKIE[company] == 'ch') { echo $ch[hls_lat].", ".$ch[hls_long]; } elseif ($_COOKIE[company] == 'shc') { echo $shc[hls_lat].", ".$shc[hls_long]; } elseif ($_COOKIE[company] == 'lmh') { echo $lmh[hls_lat].", ".$lmh[hls_long]; }?>),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  var infoWindow = new google.maps.InfoWindow;
  downloadUrl("required/xml_parse.php", function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var id = markers[i].getAttribute("id");
    var name = markers[i].getAttribute("name");
    var icao = markers[i].getAttribute("icao");
    var type = markers[i].getAttribute("type");
    var elev = markers[i].getAttribute("elev");
    var conname = markers[i].getAttribute("contactname");
    var connum = markers[i].getAttribute("contactnum");
    var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
    var html = "<b>" + name + "</b> - " + icao + "<br/>" + conname + " - " + connum;
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      SetMap: map_canvas,
      position: point,
      icon: icon.icon
    });
    bindInfoWindow(marker, map_canvas, infoWindow, html);
  }
});
function bindInfoWindow(marker, map_canvas, 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() {}
</script>
HTML:

<br />
<div class="inner-article-header"><h2>Map of Locations</h2></div>
<div id="map_canvas" style="height:565px; width:754px; margin:2px;"></div>
</div>

这是不正确的:

SetMap: map_canvas,

应该是(参见文档中的MarkerOptions):

map: map,

改正标记构造函数:

var marker = new google.maps.Marker({
  map: map,
  position: point,
  icon: icon.icon
});

将XML解析添加到初始化函数中,以便在添加标记时map有效:

  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(0,0),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    downloadUrl("example.xml", function(data) {
      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var id = markers[i].getAttribute("id");
        var name = markers[i].getAttribute("name");
        var icao = markers[i].getAttribute("icao");
        var type = markers[i].getAttribute("type");
        var elev = markers[i].getAttribute("elev");
        var conname = markers[i].getAttribute("contactname");
        var connum = markers[i].getAttribute("contactnum");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> - " + icao + "<br/>" + conname + " - " + connum;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
          map: map,
          position: point,
          icon: icon.icon
        });
        bindInfoWindow(marker, map, infoWindow, html);
      }
    });
  }

工作示例(使用我现有的XML文件之一,因为您没有提供任何示例数据)

调用bindInfoWindow和它的定义(map_canvas,应该是map)