google map api直線を削除

Question

Google Maps APIを使用してMVCアプリケーションを開発しています。 私のプログラムには4つ以上の座標があります。それによると、私は道路の道を描く必要があります。これはこれまでの私のコードです。

<div id="dvMap" style="width: 500px; height: 500px"> 
</div> 

@section scripts 
{ 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBZxYACsC1qz9gticRd4mbki9Tes9qexdw&sensor=false"></script> 
<script type="text/javascript"> 
    var markers = [ 
      { 
       "title": 'Canberra', 
       "lat": '-35.2809', 
       "lng": '149.1300', 
       "description": '' 

      }, 
      { 
       "title": 'Sydny', 
       "lat": '-33.8688', 
       "lng": '151.2093', 
       "description": '' 

      }, 
       { 
        "title": 'Tamworth', 
        "lat": '-31.0927', 
        "lng": '150.9320', 
        "description": '' 

       } 
       , 
       { 
        "title": 'Brisbane', 
        "lat": '-27.465895', 
        "lng": '153.019519', 
        "description": '' 

       } 


    ]; 
    window.onload = function() { 
     var mapOptions = { 
      center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
      zoom: 10, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     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(); 
     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 
      }); 
      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(); 

     //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.setPath(path); 
       service.route({ 
        origin: src, 
        destination: des, 
        travelMode: google.maps.DirectionsTravelMode.DRIVING 
       }, function (result, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         console.log('len ' + result.routes[0].overview_path.length) 
         for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
          path.push(result.routes[0].overview_path[i]); 
         } 
        } 
       }); 
      } 
     } 
    } 
</script> 


    } 

問題はマップに直線も表示されていることです。

マップから直線を削除する必要があります（直線上に直線を描くようにしてください）。自分のコードで何が間違っていますか？さらに、マーカーは開始点と目的地点にのみ表示する必要があります。しかし、すべての点はマーカーとして表示されます。だからそれをどうやって...？私にそれをする方向を教えてください....

Answer 1

あなたのスクリプトの冒頭で、あなたは地図上にマーカーを描いています。それはマップから直線で削除するにはラインmap: map,

var marker = new google.maps.Marker({ 
     position: myLatlng, 
     // map: map, 
     title: data.title 
    }); 

をコメントアウト避けるために：あなたは上のルートを表示するためにDirectionsRendererを使用する必要が

コメントアウトを行

//poly.setPath(path); 

ルートがdirectionsServiceによって返されるとマップします。

ここdirectionsService

directionsService.route({ 
     origin: src, 
     destination: des, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }, function(result, status) { 
     // if route is computed successfully, render it on map 
     if (status == google.maps.DirectionsStatus.OK) { 
      console.log('len ' + result.routes[0].overview_path.length); 
      renderDirections(result); 
     } else { 
      console.log("Error: ", status); 
     } 
     }); 

問題のコールバック関数にレンダリングを追加計算されたルート

function renderDirections(result) { 
    var directionsRenderer = new google.maps.DirectionsRenderer; 
    directionsRenderer.setMap(map); 
    directionsRenderer.setDirections(result); 
}; 

をレンダリングするための関数を定義すると、上に複数のルートを表示しようとしているということですあなたのマップは、this questionをチェックしてください。

これが役に立ちます。