标记未显示在Google地图上

时间:2019-05-04 08:40:45

标签: javascript php google-maps google-maps-api-3 google-maps-markers

我正在尝试将动态标记(.xml到.php)映射到Google地图上,但似乎不起作用:该地图显示但没有显示任何标记。

通过浏览器检查.xml的内容:看起来还可以 Google Maps返回200,这是可以的代码 Google地图计费已到位,API密钥似乎正确

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(50.859937, 4.613087),
    zoom: 11
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP or XML file
  downLoadUrl("http://HIDDEN/xmlbrowserdump.php", function(data, status) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(markers, function(markerElem) {
      var id = markerElem.getAttribute('id');
      var name = markerElem.getAttribute('name');
      var address = markerElem.getAttribute('address');
      var type = markerElem.getAttribute('type');
      var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')),
        parseFloat(markerElem.getAttribute('lng')));

      var infowincontent = document.createElement('div');
      var strong = document.createElement('strong');
      strong.textContent = name
      infowincontent.appendChild(strong);
      infowincontent.appendChild(document.createElement('br'));

      var text = document.createElement('text');
      text.textContent = address
      infowincontent.appendChild(text);
      var icon = customLabel[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        label: icon.label
      });
      marker.addListener('click', function() {
        infoWindow.setContent(infowincontent);
        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() {}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?key=HIDDEN&callback=initMap"></script>
<div id="map"></div>

xmlbrowserdump.php的.xml输出如下:

<markers>
<marker id="1" name="AAB389 " address="adres" lat="50.517651" lng="4.543292" type="hotel"/>
<marker id="2" name="BCS8049 " address="adres" lat="50.955474" lng="4.662360" type="hotel"/>
<marker id="3" name="BEL98V " address="adres" lat="50.957383" lng="4.658279" type="hotel"/>
<marker id="4" name="FHY5623 " address="adres" lat="50.958984" lng="4.664142" type="hotel"/>
<marker id="5" name="JAF85M " address="adres" lat="50.957150" lng="4.657211" type="hotel"/>
<marker id="6" name="TAP642 " address="adres" lat="50.951052" lng="4.636612" type="hotel"/>
<marker id="7" name="AAB389 " address="adres" lat="50.576213" lng="4.688119" type="hotel"/>
<marker id="8" name="BEL98V " address="adres" lat="50.957383" lng="4.658279" type="hotel"/>
<marker id="9" name="BCS117 " address="adres" lat="50.724808" lng="4.197159" type="hotel"/>
<marker id="10" name="TAY031W " address="adres" lat="50.500534" lng="4.563085" type="hotel"/>
</markers>

我希望这10个标记能够正确显示在地图上,但是什么也没发生。

0 个答案:

没有答案