Question

我正在从我的 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 中显示阿拉伯文本时，它看起来像这样 如何以良好的格式显示阿拉伯文本？

Answer 1

像解析坐标一样从 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>

绘制多个多边形需要在单击多边形时在 infoWindow.setContent 中显示建筑物名称

1 个答案: