谷歌地圖geolocator折線編輯顏色

Question

網站的應用程序，它從用戶的當前位置，並提供目標詳細信息到特定點。我有兩個問題。首先，我無法弄清楚如何改變兩點之間的折線顏色。默認是藍色的，但我似乎無法覆蓋它。

而且我怎麼擺脫標記一旦到達目的地已經產生？

我在哪裏可以將下面的代碼片段放在下面的代碼中以便使用？

var polylineOptions = { 
strokeColor:"#FF0000", 
strokeOpacity: 1, 
strokeWeight: 2, 
zIndex: 5 
} 

繼承人其餘的谷歌地圖js。

var directionsService = new google.maps.DirectionsService(), 
      directionsDisplay = new google.maps.DirectionsRenderer(), 
      createMap = function (start) { 
       var travel = { 
        origin: (start.coords) ? new google.maps.LatLng(start.lat, start.lng) : start.address, 
        destination: customPosition, 

        travelMode: google.maps.DirectionsTravelMode.DRIVING 
        // Exchanging DRIVING to WALKING above can prove quite amusing :-) 
       }, 


       map = new google.maps.Map(document.getElementById("map"), mapOptions); 
       directionsDisplay.setMap(map); 
       directionsDisplay.setPanel(document.getElementById("map-directions")); 
       directionsService.route(travel, function (result, status) { 
        if (status === google.maps.DirectionsStatus.OK) { 
         directionsDisplay.setDirections(result); 
        } 

        var marker = new google.maps.Marker({ 
         position: customPosition, 
         map: map, 
         clickable: false, 
         icon: 'images/minilogo.png', 
         animation: google.maps.Animation.DROP, 
         zoomControlOptions: { 
          style: google.maps.ZoomControlStyle.SMALL 
         } 
        }); 
       }); 
      }; 

     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function (position) { 
       // Success! 
       enableHighAccuracy: true, 
       $("#map-directions").show(); 
       $("#geo").each(function() { 
        $(this).animate({ 
         opacity: 0.5 
        }, 1000); 
        $(this).unbind(); 
        $(this).html("<a>Position funnen!</a>"); 
       }); 

       console.log("that worked like a charm"); 
       createMap({ 
        polylineOptions:{strokeColor:'red'}, 
        suppressMarkers:true, 
        coords: true, 
        lat: position.coords.latitude, 
        lng: position.coords.longitude 
       }); 



      }, function errorCallback(error) { 
       // Gelocation fallback: Defaults to Stockholm, Sweden 
       console.log("Something went wrong, fallback initalized"); 
       $("#geo").html("<a>Kunde inte hitta din position - pröva igen</a>"); 
       $("#map-directions").hide(); 
       $("#map-directions").unbind(); 
       createMap({ 
        coords: true, 
        address: customPosition, 
        zoom: 15 
       }); 
      }, { 
       maximumAge: Infinity, 
       timeout: 10000 
      }); 
     } else { 
      // No geolocation fallback: Defaults to Lisbon, Portugal 
      $('#geo').html('<p>Old browser, cannot run function</p>'); 
      $("#map-directions").hide(); 
      createMap({ 
       coords: true, 
       address: customPosition 
      }); 
     } //else 

非常感謝！

Answer 1

您必須設置他們DirectionsRenderer對象：

directionsDisplay = new google.maps.DirectionsRenderer(), 

像

directionsDisplay = new google.maps.DirectionsRenderer({ 
    polylineOptions: polylineOptions 
}), 

或致電

directionsDisplay.setOptions({ 
    polylineOptions: polylineOptions 
});