Javascript 从外部XML文件读取时，Google Maps中多边形上的标签或图标
我需要帮助显示标签或在谷歌地图多边形工具提示 我正在从MySQL生成一个XML文件，并将结果传递给GoogleMaps。标签文本应取自XML文件“subdivision”标记中的“name”属性（例如，代码中XML示例中的42033、44001等）。下面是我的工作代码，以及可以用来测试它的XML示例。任何帮助都将不胜感激Javascript 从外部XML文件读取时，Google Maps中多边形上的标签或图标,javascript,xml,google-maps,label,tooltip,Javascript,Xml,Google Maps,Label,Tooltip,我需要帮助显示标签或在谷歌地图多边形工具提示 我正在从MySQL生成一个XML文件，并将结果传递给GoogleMaps。标签文本应取自XML文件“subdivision”标记中的“name”属性（例如，代码中XML示例中的42033、44001等）。下面是我的工作代码，以及可以用来测试它的XML示例。任何帮助都将不胜感激 <!DOCTYPE html> <html> <head> <title>map.php</title> <
<!DOCTYPE html>
<html>
<head>
<title>map.php</title>
<!-- EXAMPLE XML
<subdivisions>
<subdivision name="42033">
<coord lat="40.64611090684065" lng="-73.97076976149259"/>
<coord lat="40.645316667618836" lng="-73.97054554390671"/>
<coord lat="40.64516421854578" lng="-73.9719467951965"/>
<coord lat="40.645862324545774" lng="-73.97208574769395"/>
<coord lat="40.64600111018018" lng="-73.97174398166794"/>
<coord lat="40.64637857107249" lng="-73.97084113795663"/>
<coord lat="40.64611090684065" lng="-73.97076976149259"/>
</subdivision>
<subdivision name="44001">
<coord lat="40.6397169858144" lng="-73.99082364793345"/>
<coord lat="40.639155386804205" lng="-73.99140800923699"/>
<coord lat="40.64077040176035" lng="-73.99407692009133"/>
<coord lat="40.64124779897801" lng="-73.99336253671026"/>
<coord lat="40.641728290946446" lng="-73.9926445605762"/>
<coord lat="40.6422049040861" lng="-73.99192812375553"/>
<coord lat="40.64268589050536" lng="-73.99121277446031"/>
<coord lat="40.64139006146806" lng="-73.98906715919247"/>
<coord lat="40.64083622307287" lng="-73.98966136464998"/>
<coord lat="40.64027520619966" lng="-73.99024413671366"/>
<coord lat="40.6397169858144" lng="-73.99082364793345"/>
</subdivision>
</subdivisions>
-->
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'/>
<script src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]"></script> <!-- API KEY REMOVED FOR PRIVACY -->
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(40.7,-74),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var arr = new Array();
var polygons = [];
var bounds = new google.maps.LatLngBounds();
downloadUrl("phpsqlajax.php", function(data) { // OUTPUT LOOKS IDENTICAL TO EXAMPLE XML ABOVE, FIRST ARGUMENT CAN BE SUBSTITUTED WITH AN XML FILE
var xml = data.responseXML;
var subdivision = xml.getElementsByTagName("subdivision");
for (var i = 0; i < subdivision.length; i++)
{
arr = [];
var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
for (var j=0; j < coordinates.length; j++) {
arr.push( new google.maps.LatLng(
parseFloat(coordinates[j].getAttribute("lat")),
parseFloat(coordinates[j].getAttribute("lng"))
));
bounds.extend(arr[arr.length-1])
}
polygons.push(new google.maps.Polygon({
paths: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.25
}));
polygons[polygons.length-1].setMap(map);
}
});
// map.fitBounds(bounds); // DOES NOT WORK FOR LARGE XML FILES
map.setCenter(new google.maps.LatLng(40.7,-74));
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
callback(request);
}
};
request.open('GET', url, true);
request.send(null);
}
/**
* Parses the given XML string and returns the parsed document in a
* DOM data structure. This function will return an empty DOM node if
* XML parsing is not supported in this browser.
* @param {string} str XML string.
* @return {Element|Document} DOM.
*/
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas { position: absolute; top: 0px; right: 0; bottom: 0px; left: 0; }
</style>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
map.php
函数初始化（）{
变量映射选项={
缩放：12，
中心：新google.maps.LatLng（40.7，-74），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var arr=新数组（）；
var=[]；
var bounds=new google.maps.LatLngBounds（）；
downloadUrl（“phpsqlajax.php”，函数（数据）{//输出看起来与上面的示例XML相同，第一个参数可以用XML文件替换
var xml=data.responseXML；
var subdivision=xml.getElementsByTagName（“subdivision”）；
对于（变量i=0；i