标记未显示在 Google Maps API 中

Posted 2023-03-23

【中文标题】标记未显示在 Google Maps API 中

【英文标题】：Markers not showing in Google Maps API

【发布时间】：2014-10-10 09:21:44

【问题描述】：

我刚刚将以下代码加载到我的网页中，经过数小时的故障排除后，我无法显示标记？

我已确认解析 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>

【问题讨论】：

标记没有map-property

map 属性在调试器中显示为未定义，因此我将其替换为SetMap 属性。还有什么可能是@Dr.Molle？

这是因为地图是在初始化函数运行时（在页面加载事件上）定义的，在 XML 数据加载之后。

@geocodezip - 你有什么建议解决这个问题？

我假设您是从某个工作示例中获得此代码的，请仔细查看您所做的更改。

【参考方案1】：

这是不正确的：

SetMap: map_canvas,

应该是（见MarkerOptions in the documentation）：

map: map,

更正的标记构造函数：

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

将XML的解析加入到initialize函数中，这样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);
      
    );
  

working example（使用我现有的 xml 文件之一，因为您没有提供任何示例数据）

您在调用 bindInfoWindow 及其定义（map_canvas，应该是 map）方面还有其他问题

【讨论】：

谢谢，已经改了，还是没有成功？返回map未定义？

您是真正的上帝先生！非常感谢你！现在完美运行！ :D :D