我有一个项目，我将通过PHP脚本呈现以XML格式呈现的MySQL数据库中存储的特定标记。
我已经设置了XML文件，但由于某些原因，标记未按以下代码正确拉出。我已经深入了解了这一点，甚至回到了Google Maps API教学文档，似乎看不到任何关闭的东西，并且会欣赏另一双眼睛。以下是从数据库中提取标记位置的特定脚本，在地图上显示它们，然后根据窗口大小调整地图大小。
我认为这是一个有效的问题，考虑到我似乎正在做一些基本的/常见的错误而且明显错过它，因为我一直在盯着这该死的东西。
<body>
<!--CONTENT DIV--------------------------------------------------------------------------------------------------------->
<div id="over_map">
<!-- lefft Side bar-->
<a href="https://www.w3schools.com/html/"><img src="beef.png" height="50" width="50"></a>
<a href="https://www.w3schools.com/html/"><img src="bread.png" height="50" width="50"></a>
<a href="https://www.w3schools.com/html/"><img src="chicken.png" height="50" width="50"></a>
<a href="https://www.w3schools.com/html/"><img src="corn.png" height="50" width="50"></a>
<a href="https://www.w3schools.com/html/"><img src="milk.png" height="50" width="50"></a>
<!-- side retailer html table -->
<div>
<table align="right">
<tr>
<td align="center" height='50' width='120'><img src='loblaws_round.png' height=29px valign="middle"></td>
</tr>
<tr>
<td align="center" height='50' width='120'><img src='nofrills_logos.png' height=29px valign="middle"></td>
</tr>
<tr>
<td align="center" height='50' width='120'><img src='shoppers_round.png' height=29px valign="middle"></td>
</tr>
<tr>
<td align="center" height='50' width='120'><img src='wholefoods_round.png' height=29px valign="middle"></td>
</tr>
</table>
</div>
<!-- Rightt Side bar-->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<!-- Use any element to open the sidenav -->
<div id="menu" onclick="openNav()"><img src="menubutton3.png" height="20" width="25"></div>
</div>
<!--MAP DIV--------------------------------------------------------------------------------------------------------->
<div id="map"></div>
<script type="text/javascript">
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "135px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
//MAP MARKERS------------------------------------------------------------------------------------------------------
//defining custom label
var customLabel = {
Loblaws: {
label: 'L'
},
};
//Map
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(43.6532, -79.3832),
zoom: 13,
disableDefaultUI: true,
scrollwheel: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
draggable: true,
disableDoubleClickZoom: true,
});
var infoWindow = new google.maps.InfoWindow;
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);
}
//Pulling info from php file
downloadUrl('http://www.shrewdily.com/markers.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 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);
});
});
});
//Resize based on window size
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&callback=initMap"></script>
答案 0 :(得分：0)
我能够进行两项更改，以便将其显示在地图上以显示标记：
在函数initMap()之后删除2个多余的代码行 - 这些代码行似乎是从函数downloadUrl()
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
//Remove these stray lines
request.open('GET', url, true);
request.send(null);
从Google Maps API Markers example添加CSS样式：
<style>
/* 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;
}
</style>
请参阅工作示例here。