2016-08-15 54 views
1

對於在地圖上繪製的Polyline,我有一個奇怪的場景。之前我張貼代碼,我首先表明,當我使用的法線方向服務(無論計算得到的disctance相同= 總路程:62.734公里):發生了什麼繪製了不明原因的額外多段線 - Google Maps API v3

enter image description here

現在當我畫方向自己 - 這條直線上出現從哪兒冒出來:

enter image description here

代碼片段:

<script type="text/javascript"> 
    var markers = [ 
      { 
       "lat": '-26.2036247253418', 
       "lng": '28.0086193084717' 
      } 
     , 
      { 
       "lat": '-26.1259479522705', 
       "lng": '27.9742794036865' 
      } 
     , 
      { 
       "lat": '-25.8434619903564', 
       "lng": '28.2100086212158' 
      } 
    ]; 
    window.onload = function() { 
     var mapOptions = { 
      center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
     var labelIndex = 0; 
     var totalDistance = 0; 

     var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
     var infoWindow = new google.maps.InfoWindow(); 
     var lat_lng = new Array(); 
     var latlngbounds = new google.maps.LatLngBounds(); 
     //var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
     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, 
       label: labels[labelIndex++ % labels.length], 
       //icon: image 
      }); 
      latlngbounds.extend(marker.position); 
      (function (marker, data) { 
       // google.maps.event.addListener(marker, "click", function (e) { 
       //  infoWindow.setContent(data.description); 
       //  infoWindow.open(map, marker); 
       // }); 
      })(marker, data); 
     } 
     map.setCenter(latlngbounds.getCenter()); 
     map.fitBounds(latlngbounds); 

     //***********ROUTING****************// 

     //Initialize the Path Array 
     var path = new google.maps.MVCArray(); 

     //Initialize the Direction Service 
     var service = new google.maps.DirectionsService(); 

     var directionsDisplay = new google.maps.DirectionsRenderer({ 
      setMap: map 
     }); 

     //Set the Path Stroke Color 
     var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' }); 

     //Loop and Draw Path Route between the Points on MAP 
     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.strokeColor = '#'+Math.floor(Math.random()*16777215).toString(16); 
       poly.setPath(path); 
       service.route({ 
        origin: src, 
        destination: des, 
        travelMode: google.maps.DirectionsTravelMode.DRIVING 
       }, function (result, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         directionsDisplay.setDirections(result); 
         var myroute = directionsDisplay.directions.routes[0]; 
         var distance = 0; 

         for (i = 0; i < myroute.legs.length; i++) { 
          distance += myroute.legs[i].distance.value; 
          //for each 'leg'(route between two waypoints) we get the distance and add it to the total 
         } 

         for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {        
          path.push(result.routes[0].overview_path[i]); 
          //console.log(result.routes[0].legs[0].distance); 
         }       
         totalDistance += distance; 
         document.getElementById('total').innerHTML = (totalDistance/1000) + ' km'; 
        }      
       }); 
      } 
     }   
    } 
</script> 
<div id="dvMap"></div> 
<div><p>Total Distance: <span id="total"></span></p></div> 
+0

可能重複繪製兩者之間的航線點在谷歌地圖v3](http://stackoverflow.com/questions/23176212/inconsistent-behaviour-drawing-a-route-between-two-points-in-google-maps-v3) – geocodezip

+0

可能[刪除直線在谷歌地圖路徑使用JavaScript](http://stackoverflow.com/questions/32836341/remove-straight-line-in-google-map-path-using-javascript) – geocodezip

+0

@geocodezip,似乎是你是這個問題的守護者,因爲你已經回答了它,並且-1再次提出要求......保持良好的工作 –

回答

0

您是不是也在第一個和最後一個poly之間畫一條線? 您應該只繪製poly0和poly1,poly1和poly2等,但不是poly100和poly0(如果poly100是最後一個)之間的線條

這將解釋從點B到A完成形狀的直線。你不想完成形狀,所以停止繪圖。有沒有可以設置爲不完成形狀的功能?

我只知道一個非常昂貴的工作,那就是沿着相同的路線從B到A以相反的順序追溯。但是,這可能不是你正在尋找的

+0

非常感謝回覆。我不知道這種方法是否存在。即使我可以畫一條線,而不是一條折線。我完全忘記了形狀方面oO –

+1

http://www.cadtutor.net/tutorials/autocad/drawing_objects/draw-05.gif 這是一個封閉和開放多段線的例子,也許你需要將它設置爲一個開放的多段線,我不會與他們熟悉,但也許你會弄明白! – AgentM

+0

是的,那是我猜的那個!謝謝! –