谷歌地图 v3 解码来自 MySQL 数据库的多边形答案

【问题标题】：Google maps v3 decode polygon(s) from MySQL database谷歌地图 v3 解码来自 MySQL 数据库的多边形
【发布时间】：2015-02-06 13:24:16
【问题描述】：

我想绘制一个或多个以编码方式保存在 MySQL 数据库中的多边形。我的代码基于已知的百慕大三角脚本example。 “polygon_xml.php”中的 XML 可以。目前，数据库中只有 1 个编码坐标。在：//alert1(decodedPolygon); 显示了坐标，但在 //alert2(decodedPolygon); 却没有。我猜它与数组 decodedPolygon 有关。让我更困惑的是，当我取消注释 //alert2(decodedPolygon); 时，多边形确实会显示出来。 Alert2 为空，但单击“确定”后，多边形显示在地图上！？？？最后，我想将文本添加到 XML 并将其放置在信息窗口中而不是坐标中。

我的 3 个编码坐标是：

{zzfIsjmu@kHuczRrg{NxcsO}t{GtczR
a}~cIqcskBu|sEov{OoxNel}AfccMwfzG~q|@nknX}u~GvczR
cljkHmfoQl|J{hrV~syGzhrV

我希望有人可以帮助/解释。

到目前为止，这是我的代码：

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry">
<script>

    var map;
    var infoWindow;
    var decodedPolygon = [];

    function initialize() {
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(49.724479, 17.578125),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        downloadUrl("polygon_xml.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 encodedPath = markers[i].getAttribute("coords");

                decodedPolygon = google.maps.geometry.encoding.decodePath(encodedPath);

                //alert1(decodedPolygon);
                //bounds.extend(decodedPolygon);
            }
        })

        //alert2(decodedPolygon);
        // Construct the polygon.
        bermudaTriangle = new google.maps.Polygon({
            paths: decodedPolygon,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        });

        bermudaTriangle.setMap(map);

        // Add a listener for the click event.
        google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

        infoWindow = new google.maps.InfoWindow();
    }

    /** @this {google.maps.Polygon} */
    function showArrays(event) {

        // Since this polygon has only one path, we can call getPath()
        // to return the MVCArray of LatLngs.
        var vertices = this.getPath();

        var contentString = '<b>Bermuda Triangle polygon</b><br>' +
            'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
            '<br>';

        // Iterate over the vertices.
        for (var i = 0; i < vertices.getLength(); i++) {
            var xy = vertices.getAt(i);
            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);
    }

    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() {}

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<body>
<div id="map-canvas"></div>

【问题讨论】：

您的 XML 是什么样的？可以提供样品吗？

标签： mysql xml google-maps polygon decode

【解决方案1】：

downloadUrl 是异步的，您需要使用回调例程内部返回的数据。现在，bermudaTriangle 多边形是在数据返回之前构建的（在回调函数之外）。

function initialize() {
  var mapOptions = {
      zoom: 3,
      center: new google.maps.LatLng(49.724479, 17.578125),
      mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  downloadUrl("polygon_xml.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 encodedPath = markers[i].getAttribute("coords");

        var decodedPolygon = google.maps.geometry.encoding.decodePath(encodedPath);
        for (var j = 0; j < decodedPolygon.length; j++) {
          bounds.extend(decodedPolygon[j]);
        }
        // Construct the polygon.
        var bermudaTriangle = new google.maps.Polygon({
            paths: decodedPolygon,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        });

        bermudaTriangle.setMap(map);

        // Add a listener for the click event.
        google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

      }
      map.fitBounds(bounds);
    })

    infoWindow = new google.maps.InfoWindow();
}

proof of concept fiddle

【讨论】：

非常感谢您向我解释。我在数据库中添加了 2 个额外的编码多边形，但地图上只显示了一个。如何在地图上显示所有多边形？循环百慕大三角？
那将是一个不同的问题。当您提出要求时，请务必提供一个 Minimal, Complete, Tested and Readable example 来证明该问题。如果这回答了您最初的问题，请accept it。
好吧，上面的代码是用来绘制一个多边形的。我问，“一个或多个多边形”。花了2个小时后，我无法完成。我已经在您的网站上查找了示例，但我太菜鸟了，无法自己完成。您可以添加代码以查看显示多个多边形吗？这对你来说应该不难。尽我所能……
您没有提供任何个编码多边形数据。提供一些样本。
请不要在 cmets 中发布代码（真的很难阅读）。使用请求的信息更新您的问题。