Google 从 MySQL 数据库映射 v3 解码多边形

Question

我想绘制一个或多个多边形，这些多边形以编码方式保存在 MySQL 数据库中。我的代码基于已知的百慕大三角脚本 example。来自 "polygon_xml.php" 的 XML 可以。目前，数据库中只有 1 个编码坐标。在：//alert1(decodedPolygon); 处显示坐标，但在 //alert2(decodedPolygon); 处未显示。我猜它与数组 decodedPolygon 有关。更让我困惑的是，当我取消注释 //alert2(decodedPolygon); 时，多边形确实显示了。 Alert2是空的，但是点击"OK"后，多边形出现在地图上了！？？？最后，我想将文本添加到 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>

Answer 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

Google 从 MySQL 数据库映射 v3 解码多边形

Google maps v3 decode polygon(s) from MySQL database

mysql

xml

google-maps

polygon

decode