绘制多个多边形需要在单击多边形时在 infoWindow.setContent 中显示建筑物名称
Drawing Multiple Polygons need to show building name in infoWindow.setContent when click on the Polygon
我正在从 xml 中绘制多个多边形
当我点击多边形时，我可以显示这个多边形的坐标。
如何在信息窗口中显示父建筑的名称？
(XML中的值<building name="Parent 1">')
这是我的代码
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(31.5124803, 34.4563484),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
let infoWindow;
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
var arr = new Array();
var polygons = [];
var bounds = new google.maps.LatLngBounds();
// downloadUrl("building-coordinates.php", function(data) {
var xmlString = '<buildings>' +
' <building name="Parent 1">' +
' <coord lat="31.516659678847805" lng="34.44485835736088"/>' +
' <coord lat="31.51725416608741" lng="34.445373340720586"/>' +
' <coord lat="31.518287676091255" lng="34.44383913699617"/>' +
' <coord lat="31.517665745271106" lng="34.44331342914404"/>' +
' </building>' +
' <building name="Parent 2">' +
' <coord lat="31.517245024846186" lng="34.44284136907313"/>' +
' <coord lat="31.517665734433653" lng="34.442143996149746"/>' +
' <coord lat="31.51810474332365" lng="34.44211180181254"/>' +
' <coord lat="31.518507157969555" lng="34.4414680630535"/>' +
' <coord lat="31.516851683063873" lng="34.43988025593966"/>' +
' <coord lat="31.515745053534033" lng="34.441543229813185"/>' +
' </building>' +
' </buildings>';
// var xmlString = ( new DOMParser() ).parseFromString( "test.xml", "application/xml" );
var xml = xmlParse(xmlString);
var building = xml.getElementsByTagName("building");
// alert(building.length);
for (var i = 0; i < building.length; i++) {
arr = [];
var coordinates = xml.documentElement.getElementsByTagName("building")[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.7,
strokeWeight: 2,
draggable: false,
fillColor: '#FF0000',
fillOpacity: 0.3
}));
polygons[polygons.length - 1].setMap(map);
polygons[polygons.length - 1].addListener("click", showArrays);
}
// });
map.fitBounds(bounds);
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
const polygon = this;
const vertices = polygon.getPath();
let contentString =
"<b>Building Name</b><br>" +
"Clicked location: <br>" +
event.latLng.lat() +
"," +
event.latLng.lng() +
"<br>";
// Iterate over the vertices.
for (let i = 0; i < vertices.getLength(); i++) {
const xy = vertices.getAt(i);
let c = i + 1;
contentString += "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
}
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
}
/**
* 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);
<!DOCTYPE html>
<html>
<head>
<title>Polygon Arrays</title>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map-canvas,
body,
html {
height: 90%;
width: 100%;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="script.js"></script>
</body>
</html>
这是点击多边形显示坐标的图片
我也需要显示名字 <building name="Parent 1">'
更新：
当我在 infoWindow.setContent 中显示阿拉伯文本时，它看起来像这样
如何以良好的格式显示阿拉伯文本？？
像解析坐标一样从 XML 中解析建筑物名称（name 是 <building> 元素的属性，而不是 <coordinates> 标签：
var name = building[i].getAttribute("name");
将其作为属性放在 polygon 上，以便您可以在点击侦听器中获取它：
polygons.push(new google.maps.Polygon({
// existing attributes, followed by a comma
name: name
}));
将其添加到点击监听器中的InfoWindow：
let contentString =
"<b>"+polygon.name+"</b><br>" +
// ...
工作代码片段：
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(31.5124803, 34.4563484),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
let infoWindow;
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
var arr = new Array();
var polygons = [];
var bounds = new google.maps.LatLngBounds();
// downloadUrl("building-coordinates.php", function(data) {
var xmlString = '<buildings>' +
' <building name="Parent 1">' +
' <coord lat="31.516659678847805" lng="34.44485835736088"/>' +
' <coord lat="31.51725416608741" lng="34.445373340720586"/>' +
' <coord lat="31.518287676091255" lng="34.44383913699617"/>' +
' <coord lat="31.517665745271106" lng="34.44331342914404"/>' +
' </building>' +
' <building name="Parent 2">' +
' <coord lat="31.517245024846186" lng="34.44284136907313"/>' +
' <coord lat="31.517665734433653" lng="34.442143996149746"/>' +
' <coord lat="31.51810474332365" lng="34.44211180181254"/>' +
' <coord lat="31.518507157969555" lng="34.4414680630535"/>' +
' <coord lat="31.516851683063873" lng="34.43988025593966"/>' +
' <coord lat="31.515745053534033" lng="34.441543229813185"/>' +
' </building>' +
' </buildings>';
// var xmlString = ( new DOMParser() ).parseFromString( "test.xml", "application/xml" );
var xml = xmlParse(xmlString);
var building = xml.getElementsByTagName("building");
// alert(building.length);
for (var i = 0; i < building.length; i++) {
arr = [];
var name = building[i].getAttribute("name");
var coordinates = xml.documentElement.getElementsByTagName("building")[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.7,
strokeWeight: 2,
draggable: false,
fillColor: '#FF0000',
fillOpacity: 0.3,
name: name
}));
polygons[polygons.length - 1].setMap(map);
polygons[polygons.length - 1].addListener("click", showArrays);
}
// });
map.fitBounds(bounds);
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
const polygon = this;
const vertices = polygon.getPath();
let contentString =
"<b>" + polygon.name + "</b><br>" +
"Clicked location: <br>" +
event.latLng.lat() +
"," +
event.latLng.lng() +
"<br>";
// Iterate over the vertices.
for (let i = 0; i < vertices.getLength(); i++) {
const xy = vertices.getAt(i);
let c = i + 1;
contentString += "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
}
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
}
/**
* 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);
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map-canvas,
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Polygon Arrays</title>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
我正在从 xml 中绘制多个多边形 当我点击多边形时，我可以显示这个多边形的坐标。
如何在信息窗口中显示父建筑的名称？
(XML中的值<building name="Parent 1">')
这是我的代码
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(31.5124803, 34.4563484),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
let infoWindow;
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
var arr = new Array();
var polygons = [];
var bounds = new google.maps.LatLngBounds();
// downloadUrl("building-coordinates.php", function(data) {
var xmlString = '<buildings>' +
' <building name="Parent 1">' +
' <coord lat="31.516659678847805" lng="34.44485835736088"/>' +
' <coord lat="31.51725416608741" lng="34.445373340720586"/>' +
' <coord lat="31.518287676091255" lng="34.44383913699617"/>' +
' <coord lat="31.517665745271106" lng="34.44331342914404"/>' +
' </building>' +
' <building name="Parent 2">' +
' <coord lat="31.517245024846186" lng="34.44284136907313"/>' +
' <coord lat="31.517665734433653" lng="34.442143996149746"/>' +
' <coord lat="31.51810474332365" lng="34.44211180181254"/>' +
' <coord lat="31.518507157969555" lng="34.4414680630535"/>' +
' <coord lat="31.516851683063873" lng="34.43988025593966"/>' +
' <coord lat="31.515745053534033" lng="34.441543229813185"/>' +
' </building>' +
' </buildings>';
// var xmlString = ( new DOMParser() ).parseFromString( "test.xml", "application/xml" );
var xml = xmlParse(xmlString);
var building = xml.getElementsByTagName("building");
// alert(building.length);
for (var i = 0; i < building.length; i++) {
arr = [];
var coordinates = xml.documentElement.getElementsByTagName("building")[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.7,
strokeWeight: 2,
draggable: false,
fillColor: '#FF0000',
fillOpacity: 0.3
}));
polygons[polygons.length - 1].setMap(map);
polygons[polygons.length - 1].addListener("click", showArrays);
}
// });
map.fitBounds(bounds);
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
const polygon = this;
const vertices = polygon.getPath();
let contentString =
"<b>Building Name</b><br>" +
"Clicked location: <br>" +
event.latLng.lat() +
"," +
event.latLng.lng() +
"<br>";
// Iterate over the vertices.
for (let i = 0; i < vertices.getLength(); i++) {
const xy = vertices.getAt(i);
let c = i + 1;
contentString += "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
}
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
}
/**
* 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);
<!DOCTYPE html>
<html>
<head>
<title>Polygon Arrays</title>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map-canvas,
body,
html {
height: 90%;
width: 100%;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="script.js"></script>
</body>
</html>
这是点击多边形显示坐标的图片
我也需要显示名字 <building name="Parent 1">'
更新： 当我在 infoWindow.setContent 中显示阿拉伯文本时，它看起来像这样 如何以良好的格式显示阿拉伯文本？？
像解析坐标一样从 XML 中解析建筑物名称（name 是 <building> 元素的属性，而不是 <coordinates> 标签：
var name = building[i].getAttribute("name");
将其作为属性放在 polygon 上，以便您可以在点击侦听器中获取它：
polygons.push(new google.maps.Polygon({
// existing attributes, followed by a comma
name: name
}));
将其添加到点击监听器中的InfoWindow：
let contentString =
"<b>"+polygon.name+"</b><br>" +
// ...
工作代码片段：
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(31.5124803, 34.4563484),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
let infoWindow;
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
var arr = new Array();
var polygons = [];
var bounds = new google.maps.LatLngBounds();
// downloadUrl("building-coordinates.php", function(data) {
var xmlString = '<buildings>' +
' <building name="Parent 1">' +
' <coord lat="31.516659678847805" lng="34.44485835736088"/>' +
' <coord lat="31.51725416608741" lng="34.445373340720586"/>' +
' <coord lat="31.518287676091255" lng="34.44383913699617"/>' +
' <coord lat="31.517665745271106" lng="34.44331342914404"/>' +
' </building>' +
' <building name="Parent 2">' +
' <coord lat="31.517245024846186" lng="34.44284136907313"/>' +
' <coord lat="31.517665734433653" lng="34.442143996149746"/>' +
' <coord lat="31.51810474332365" lng="34.44211180181254"/>' +
' <coord lat="31.518507157969555" lng="34.4414680630535"/>' +
' <coord lat="31.516851683063873" lng="34.43988025593966"/>' +
' <coord lat="31.515745053534033" lng="34.441543229813185"/>' +
' </building>' +
' </buildings>';
// var xmlString = ( new DOMParser() ).parseFromString( "test.xml", "application/xml" );
var xml = xmlParse(xmlString);
var building = xml.getElementsByTagName("building");
// alert(building.length);
for (var i = 0; i < building.length; i++) {
arr = [];
var name = building[i].getAttribute("name");
var coordinates = xml.documentElement.getElementsByTagName("building")[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.7,
strokeWeight: 2,
draggable: false,
fillColor: '#FF0000',
fillOpacity: 0.3,
name: name
}));
polygons[polygons.length - 1].setMap(map);
polygons[polygons.length - 1].addListener("click", showArrays);
}
// });
map.fitBounds(bounds);
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
const polygon = this;
const vertices = polygon.getPath();
let contentString =
"<b>" + polygon.name + "</b><br>" +
"Clicked location: <br>" +
event.latLng.lat() +
"," +
event.latLng.lng() +
"<br>";
// Iterate over the vertices.
for (let i = 0; i < vertices.getLength(); i++) {
const xy = vertices.getAt(i);
let c = i + 1;
contentString += "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
}
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
}
/**
* 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);
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map-canvas,
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Polygon Arrays</title>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>