在谷歌地图中显示它们之间的多个标记和折线

时间:2014-10-02 06:19:11

标签: google-maps google-maps-api-3

您好我正在使用谷歌地图。我显示了多个位置标记,并希望在标记之间显示折线。显示标记但不显示折线。任何帮助将不胜感激。

这是我从db

获取位置数据的代码
<?php
$hostname = 'localhost'; 
$dbname = 'gtroad'; 
$username = 'root'; 
$password = ''; 
mysql_connect("$hostname", "$username", "$password") or DIE("Connection to host is  failed");
mysql_select_db("$dbname") or DIE("database not available");
$q1 = mysql_query("SELECT city, lat, lng FROM location");
$lalng = array();
for($i=0;$i<mysql_num_rows($q1);$i++)
{
    $j = 0;
    $obj = mysql_fetch_object($q1);
    $lalng[$i][$j] = $obj->city;
    $j++;
    $lalng[$i][$j] = $obj->lat;
    $j++;
    $lalng[$i][$j] = $obj->lng;
    $j++;
} 
$ar = json_encode($lalng);
?>

这是谷歌地图的javascript代码,用于显示标记和它们之间的折线...

<script>

function initialize() {
var mapOptions = {
   zoom: 6,
   featureType: 'road',
   center: new google.maps.LatLng(30.6667, 72.1667),
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

 var locations = <?php echo $ar; ?>;
 var infowindow = new google.maps.InfoWindow();

    var marker, i;  
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });   

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }

      })(marker, i));  
    }

 /* polyline code */     
    var flightPath, mylatlong = new Array(); 
    for(i=0; i < locations.length; i++){    
        mylatlong = new google.maps.LatLng(locations[i][1], locations[i][2]);
        document.write(mylatlong);  
    }
        flightPath = new google.maps.Polyline({
            path: mylatlong,
            geodesic: true,
            strokeColor: '#999999',
            strokeOpacity: 1.0,
            strokeWeight: 3
        });
        flightPath.setMap(map); 
 } //end polyline code

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

google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
});

</script>

0 个答案:

没有答案