在Google Maps API V3上从XML文件绘制多个多边形
Drawing multiple Polygons on Google Maps API V3 from XML File
我实际绘制了一个地图,其中包含从XML文件解析的多个标记。另外,我在地图上画了两个多边形。这些线在脚本中是硬编码的,我还想从xml文件中加载多边形线。下面是我的实际代码:
<script type="text/javascript">
var customIcons = {
warning: {
icon: 'https://scoo.me/img/marker_warning.png'
},
activate: {
icon: 'https://scoo.me/img/marker_activate.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
scrollwheel: false,
mapTypeId: 'roadmap',
mapTypeControl: false
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("../xml/vehicles_service_required.php", function(data) {';
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var VehicleID = markers[i].getAttribute("VehicleID");
var VehicleLabel = markers[i].getAttribute("VehicleLabel");
var ServiceRequired = markers[i].getAttribute("ServiceRequired");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(point);
var html = "<b>Roller-Nr. " + VehicleLabel + "</b> <br/>(ID-" + VehicleID + ")";
var icon = 'https://scoo.me/img/marker_activate.png';
//var icon = {};
if (ServiceRequired == "0") {
icon = 'https://scoo.me/img/marker_warning.png';
} else if (ServiceRequired == "-1") {
icon = 'https://scoo.me/img/marker_activate.png';
}
var marker = new google.maps.Marker({
map: map,
position: point,
//icon: 'https://scoo.me/img/marker_warning.png'
icon: icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
map.fitBounds(bounds);
// Polyglon Munich
var muenchen = new google.maps.Polygon({
paths: [
new google.maps.LatLng(48.163108,11.588816),
new google.maps.LatLng(48.169462,11.595339),
new google.maps.LatLng(48.173069,11.599073),
new google.maps.LatLng(48.176016,11.592807),
new google.maps.LatLng(48.182455,11.599373)],
strokeColor: '#21a9e1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#21a9e1',
fillOpacity: 0.2,
map: map
});
// Geschäftsgebiet Cologne
var koeln = new google.maps.Polygon({
paths: [
new google.maps.LatLng(50.9558045,6.9741296),
new google.maps.LatLng(50.9567777,6.9755029),
new google.maps.LatLng(50.9579266,6.9736361),
new google.maps.LatLng(50.9574265,6.9724559),
new google.maps.LatLng(50.9596701,6.9679069),
new google.maps.LatLng(50.9600215,6.9656538)],
strokeColor: '#21a9e1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#21a9e1',
fillOpacity: 0.2,
map: map
});
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
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>
我的多边形的XML格式是:
<subdivisions>
<subdivision Name="Muenchen">
<coord lat="48.163108" lng="11.588816"/>
<coord lat="48.169462" lng="11.595339"/>
<coord lat="48.173069" lng="11.599073"/>
<coord lat="48.176016" lng="11.592807"/>
<coord lat="48.182455" lng="11.599373"/>
</subdivision>
<subdivision Name="Koeln">
<coord lat="50.9558045" lng="6.9741296"/>
<coord lat="50.9567777" lng="6.9755029"/>
<coord lat="50.9579266" lng="6.9736361"/>
<coord lat="50.9574265" lng="6.9724559"/>
<coord lat="50.9596701" lng="6.9679069"/>
<coord lat="50.9600215" lng="6.9656538"/>
<coord lat="50.9627245" lng="6.9615983"/>
<coord lat="50.9651706" lng="6.9538736"/>
<coord lat="50.9664139" lng="6.9517493"/>
</subdivision>
</subdivisions>
谁能给我一个例子如何在我的脚本中实现多聚脂的XML。提前感谢!
下面是构建latllng对象列表并将结果保存为latllng列表的代码。
var DOMParser = new DOMParser();
var xmltext = `
<subdivisions>
<subdivision Name="Muenchen">
<coord lat="48.163108" lng="11.588816"/>
<coord lat="48.169462" lng="11.595339"/>
<coord lat="48.173069" lng="11.599073"/>
<coord lat="48.176016" lng="11.592807"/>
<coord lat="48.182455" lng="11.599373"/>
</subdivision>
<subdivision Name="Koeln">
<coord lat="50.9558045" lng="6.9741296"/>
<coord lat="50.9567777" lng="6.9755029"/>
<coord lat="50.9579266" lng="6.9736361"/>
<coord lat="50.9574265" lng="6.9724559"/>
<coord lat="50.9596701" lng="6.9679069"/>
<coord lat="50.9600215" lng="6.9656538"/>
<coord lat="50.9627245" lng="6.9615983"/>
<coord lat="50.9651706" lng="6.9538736"/>
<coord lat="50.9664139" lng="6.9517493"/>
</subdivision>
</subdivisions>`;
var doc = DOMParser.parseFromString( xmltext, "application/xml" );
var docElem = doc.documentElement;
var subdiv = docElem.getElementsByTagName('subdivision');
var latlnglists = []; //for lists of lat-lng objs
for (var i = 0; i < subdiv.length; i++) {
var name = subdiv[i].getAttribute("Name");
//console.log(name);
var coord = subdiv[i].getElementsByTagName('coord');
var latlngs = [];
for (var k = 0; k < coord.length; k++) {
var lat = coord[k].getAttribute("lat");
var lng = coord[k].getAttribute("lng");
//console.log("lat, lng: " + lat + ", " + lng);
latlngs.push({lat: lat, lng: lng});
}
latlnglists.push(latlngs);
}
这部分使用latlnglists[i],其中i=(0,1),作为路径值来构建多边形。
var muenchen = new google.maps.Polygon({
paths: latlnglists[0],
strokeColor: '#21a9e1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#21a9e1',
fillOpacity: 0.2,
map: map
});
var koeln = new google.maps.Polygon({
paths: latlnglists[1],
strokeColor: '#21a9e1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#21a9e1',
fillOpacity: 0.2,
map: map
});
编辑
要将我的代码改编成您的代码,请遵循以下步骤:
- 删除两个多边形(var muenchen + var koeln)的代码。它将被替换为我的代码。
- 将我的代码的第二个语句更改为
var xmltext = data.responseText;
- 将删除的代码替换为我的所有代码
相关文章:
- 如何使用d3.js从csv文件中绘制areaplot?请任何人分享代码
- 使用 JSON 文件绘制到画布
- 如何用我在HTML5画布上绘制的src保存图像文件
- 如何使用XML文件中的温度和湿度数据绘制Google图表
- 将用Javascript绘制的外部SVG文件导出为PNG图像
- 如何在 C# .net 中将.aspx页另存为 html 文件时绘制动态 JQ 图
- 预绘制拉斐尔屏幕,将它们保存到文件并在运行时加载
- 动态读取属性文件并在 javascript 中绘制文本框
- 使用 JSON 文件中的 extjs 绘制饼图
- D3在一个图表中绘制多个文件,每个文件代表不同的线/条
- 无法在HighCharts中使用外部csv文件绘制饼图
- 将csv文件中的数据绘制成图形
- Highcharts不显示数据,而是在从CSV文件读取时绘制图表
- 在D3的情况下,我可以在json文件中绘制一个只有链接的图吗
- 如何使用d3.js从json文件中提取数据来绘制动态图
- 如何在javascript文件中使用json列表文件绘制堆叠条形图
- 在Google Maps API V3上从XML文件绘制多个多边形
- Ajax:每10分钟从json文件中获取数据,并在谷歌全球API中绘制
- 将JSON文件加载到highcharts中以绘制折线图
- 从文件绘制图像时,画布到base64不能工作