我正在尝试将动态标记(.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个标记能够正确显示在地图上,但是什么也没发生。