来自mySQL的谷歌地图多段线阵列

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);