来自 mySQL 的 Google Maps 折线数组

Question

我正在使用 api 页面 (https://developers.google.com/maps/articles/phpsqlajax_v3) 上的指南通过 XML 文件从 mySQL 数据库中读取标记。

如果可能，我不确定如何从 xml 文件中获取折线路径。不过，我可以让标记正常工作。

我现有的代码在这里：

<script type="text/javascript">
    //<![CDATA[
        function load() {       
            //Retrieve generated xml file containing marker data
                downloadUrl("phpsqlajax_genxml.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");

            //Create map, find center from marker array
            var map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(parseFloat(markers[0].getAttribute("latitude")),
                    parseFloat(markers[0].getAttribute("longitude"))),
                zoom: 5,
                scaleControl:true,
                mapTypeId:google.maps.MapTypeId.ROADMAP,
                });
                var infoWindow = new google.maps.InfoWindow;
            var imgnum=1;
            //Loop through markers array, using its length to find points and create markers on map
            for (var i = 0; i < markers.length; i++) {
                var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("latitude")),
                    parseFloat(markers[i].getAttribute("longitude")));
                var image = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + imgnum + '|FF0000|000000'
); 
                imgnum++;               
                var marker = new google.maps.Marker({
                    map: map,
                        position: point,
                    icon: image,                
                });       

            }

            //var polylinep = [new google.maps.LatLng(parseFloat(markers[0].getAttribute("latitude")), parseFloat(markers[0].getAttribute("longitude"))),new google.maps.LatLng(parseFloat(markers[1].getAttribute("latitude")), parseFloat(markers[1].getAttribute("longitude")))];    

            for(var i = 0; i < markers.length; i++){
                new google.maps.LatLng(parseFloat(markers[i].getAttribute("latitude")), parseFloat(markers[i].getAttribute("longitude")));
            }   

            var polyline = new google.maps.Polyline({
                path: polylinep,
                geodesic: true,
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2
            });     

            polyline.setMap(map);

            });
        }

        //Infowindow creator - unimplemented
        function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
                });
        }

        //Get xml file
        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() {}

            //]]>

        </script>

提前致谢。

编辑：这是使用 PHP 脚本生成的 xml 文件：

<markers>
<marker latitude="-4.06865" longitude="52.3994"/>
<marker latitude="-4.06865" longitude="52.3994"/>
<marker latitude="-4.06493" longitude="52.4162"/>
<marker latitude="-4.06493" longitude="52.4162"/>
</markers>

Answer 1

将您的 XML 解析为数组并使用以下代码：

  function initialize() {
    var myLatlng = new google.maps.LatLng(52.113252, 5.410767);
    var mapOptions = {
        zoom: 12,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var infoWindow = new google.maps.InfoWindow({
      content: ''
    });

    <?php foreach($items as $item): ?>
      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(<?=(float)$item['x'];?>, <?=(float)$item['y'];?>),
          map: map,
          flat: true,
          draggable: false
      });
      google.maps.event.addListener(marker, 'mouseover', function() {

        infoWindow.setContent("<?=$item['content']?>");
        infoWindow.open(map, this);
      });
      google.maps.event.addListener(marker, 'mouseout', function() {
        infoWindow.close();
      });
    <?php endforeach; ?>
  }

  google.maps.event.addDomListener(window, 'load', initialize);