谷歌地图地形图折线编辑颜色

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
});