我一直在尝试按照Google的教程使用MySQL和PHP实现Google地图。这是我的代码:
<div class="container">
<div id="map">
</div>
</div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(XX.XXX, XX.XXX),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('http://xxxxxx.com/xxxxxxxx.php/', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
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 = id
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
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() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXX&callback=initMap">
</script>
我成功地遵循了本教程,创建了一个创建XML数据的PHP脚本,并在downloadUrl函数中调用了这些数据。但是,本教程基于使用静态XML文件。我认为我需要改变一些东西才能让标记出现在地图上。当我在我的页面上打开控制台时,我得到以下错误:
未捕获的ReferenceError:未定义图标
在profile.php:57
at HTMLCollection.forEach()
在profile.php:41
在XMLHttpRequest.request.onreadystatechange(profile.php:77)
有关如何解决这些错误的任何想法?我被困在这几个小时。提前谢谢!
答案 0 :(得分:0)
您的代码未定义icon
。变化:
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
致:
var marker = new google.maps.Marker({
map: map,
position: point
});