PHP / JavaScript - 谷歌地图上的折线问题

时间:2014-04-27 23:17:03

标签: javascript php google-maps

我在Google地图上的折线有一个有趣的问题......这是一张图片

enter image description here

我想说第一个标记与其他标记连接。但是我有很多不同的路线/坐标,而其他地图看起来也很时髦(哈哈)。

是否有人可能会看到我的代码问题?我只能做一个简单的调整吗?谢谢大家和任何帮助!!

<?php
$server = 'localhost';$user = 'root';$database = 'transportation';$password = null;
$db = mysqli_connect($server, $user, $password, $database);
?>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var markers = [

  <?php
  if (isset($_GET['routeselected'])) 
  {
  $result = mysqli_query($db, "SELECT * FROM BusStops WHERE RouteNum =" . $_GET['routeselected']);
  while ($row = mysqli_fetch_array($result))
      echo "{\"title\": '".$row['BusCompanyName']."', \"lat\": '".$row['Latitude']."', \"lng\": '".$row['Longitude']."', \"description\": '".$row['StopName']."'},";
  }
  ?>
];

</script>

<script type="text/javascript">

   window.onload = function () {

       var mapOptions = {
           center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
           zoom: 13,
           mapTypeId: google.maps.MapTypeId.ROADMAP
       };

       var path = new google.maps.MVCArray();
       var service = new google.maps.DirectionsService();
       var infoWindow = new google.maps.InfoWindow();
       var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
       var poly = new google.maps.Polyline({ map: map, strokeColor: '#FF8200' });

       var lat_lng = new Array();
       for (i = 0; i < markers.length; i++) {
           var data = markers[i]
           var myLatlng = new google.maps.LatLng(data.lat, data.lng);
           lat_lng.push(myLatlng);
           var marker = new google.maps.Marker({
               position: myLatlng,
               map: map,
               title: data.title
           });
           (function (marker, data) {
               google.maps.event.addListener(marker, "click", function (e) {
                   infoWindow.setContent(data.description);
                   infoWindow.open(map, marker);
               });
           })(marker, data);
       }
       for (var i = 0; i < lat_lng.length; i++) {
           if ((i + 1) < lat_lng.length) {
               var src = lat_lng[i];
               var des = lat_lng[i + 1];
               path.push(src);
               poly.setPath(path);
               service.route({
                   origin: src,
                   destination: des,
                   travelMode: google.maps.DirectionsTravelMode.DRIVING
               }, function (result, status) {
                   if (status == google.maps.DirectionsStatus.OK) {
                       for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                           path.push(result.routes[0].overview_path[i]);
                       }
                   }
               });
           }
       }
   }

0 个答案:

没有答案