Javascript 使用Google Maps API从XML文件在地图上显示标记
我有一个项目，通过PHP脚本以XML形式呈现存储在MySQL数据库中的特定标记 我已经设置了XML文件，但是由于某些原因，没有按照下面的代码正确地提取标记。我已经对此进行了深入的研究，甚至回到了谷歌地图API的教学文档，似乎看不到任何东西是关闭的，并希望有另一套眼睛。下面是从数据库中提取标记位置、在地图上显示标记位置，然后根据窗口大小调整地图大小的特定脚本 我认为这是一个合理的问题，考虑到我似乎在做一些基本的/常见的错误，并且明显地错过了它，因为我一直盯着那该死的东西看Javascript 使用Google Maps API从XML文件在地图上显示标记,javascript,xml,google-maps,google-maps-api-3,Javascript,Xml,Google Maps,Google Maps Api 3,我有一个项目，通过PHP脚本以XML形式呈现存储在MySQL数据库中的特定标记 我已经设置了XML文件，但是由于某些原因，没有按照下面的代码正确地提取标记。我已经对此进行了深入的研究，甚至回到了谷歌地图API的教学文档，似乎看不到任何东西是关闭的，并希望有另一套眼睛。下面是从数据库中提取标记位置、在地图上显示标记位置，然后根据窗口大小调整地图大小的特定脚本 我认为这是一个合理的问题，考虑到我似乎在做一些基本的/常见的错误，并且明显地错过了它，因为我一直盯着那该死的东西看 <body>
<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>
/*将侧导航的宽度设置为250px*/
函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“135px”；
}
/*将侧边导航的宽度设置为0*/
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}
//地图标记--------------------------------------------------------------------
//定义自定义标签
var customLabel={
法律：{
标签：“我”
},
};
//地图
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：新google.maps.LatLng（43.6532，-79.3832），
缩放：13，
disableDefaultUI:true，
滚轮：错误，
动物控制：错误，
mapTypeControl:false，
scaleControl:false，
街景控制：错误，
旋转控制：错误，
全屏控制：错误，
真的，
禁用双击缩放：真，
});
var infoWindow=new google.maps.infoWindow；
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
//从php文件中提取信息
下载URL（'http://www.shrewdily.com/markers.php，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（'marker'）；
Array.prototype.forEach.call（markers，function（markereem））{
var id=markereem.getAttribute（'id'）；
var name=markereem.getAttribute（'name'）；
var address=markerem.getAttribute（'address'）；
var type=markereem.getAttribute（'type'）；
var point=new google.maps.LatLng(
parseFloat（markerem.getAttribute（'lat'）），
parseFloat（markerem.getAttribute（'lng'））；
var infowincontent=document.createElement（'div'）；
var strong=document.createElement（'strong'）；
strong.textContent=名称
infowincontent.appendChild（强）；
infowincontent.appendChild（document.createElement（'br'））；
var text=document.createElement（'text'）；
text.textContent=地址
infowincontent.appendChild（文本）；
var icon=customLabel[type]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
标签：icon.label
});
marker.addListener（'click'，function（））{
setContent（infowincontent）；
信息窗口。打开（地图、标记）；
});
});
});
//根据窗口大小调整大小
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
var center=map.getCenter（）；
google.maps.event.trigger（map，“resize”）；
地图设置中心（中心）；
});
}
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{
}
initMap（）downloadUrl（）的末尾复制的
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
请参阅工作示例。发布的代码中没有地图。请提供一个演示该问题的示例。如果我修复了映射所需的缺少的内容，我会得到一个javascript错误：
uncaughtreferenceerror:customLabel未在此行定义var icon=customLabel[type]|{
，如果我解决了这个问题，我会得到标记。@geocodezip-请参阅上面我显示地图的其余代码edited@geocodezip
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);
<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>