Question

我想绘制一个或多个保存在MySQL数据库中的多边形。我的代码基于已知的bermudatriangle脚本example。 “polygon_xml.php”中的XML是可以的。目前，数据库中只有1个编码坐标。在：//alert1(decodedPolygon);显示坐标，但在//alert2(decodedPolygon);则不显示。它与数组decodedPolygon有关。让我更加困惑的是，当我取消注释//alert2(decodedPolygon);时，多边形会显示。 Alert2为空但单击“确定”后，多边形将显示在地图上！???最后，我想在XML中添加文本并将其放在infowindow而不是坐标中。

我的3个编码坐标是：

{zzfIsjmu @ kHuczRrg {NxcsO} t {GtczR
a} ~cIqcskBu | sEov {OoxNel} AfccMwfzG~q | @nknX} u~GvczR
cljkHmfoQl |百灵{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映射v3解码MySQL数据库中的多边形

1 个答案: