Question

我在网站上有一个谷歌地图，我用自定义标记显示商家的位置，我也显示了到达该地点的路线，但我似乎无法理解如何使用自定义图标START职位......

以下是我使用的代码：

<script>
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer({draggable: true,suppressMarkers: true});
        var latlng = new google.maps.LatLng(45.86140239,-74.062538);
        var myOptions = {
            zoom:13,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: latlng,
            mapTypeControl: false,
                      panControl: false,
                      streetViewControl: false,
                      zoomControl: false,
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        // Marqueur sur le bureau
        var icon = {url: 'marker001c.png'};
        var headquartersMarker = new google.maps.Marker({
            position: latlng,
            map: map,
            animation: google.maps.Animation.DROP,
            icon: icon,
            zIndex:99999
        });

        directionsDisplay.setMap(map);
    }

    // Calcule de la route
    function calcRoute() {
        var start = document.getElementById("start").value;
        var end = new google.maps.LatLng(45.86140239,-74.062538);
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
            directionsDisplay.setPanel(document.getElementById('panel'));
        });

        var starticon = new google.maps.MarkerImage('test.png');
        var marker = new google.maps.Marker({
            position:start,
            map: map,
            icon: starticon,
        });
        makeMarker({
            position: new google.maps.LatLng(60.17295,24.93981),
            content: "Some text in the info bubble.",
            title: "Tooltip text"
        });
    }
</script>

通过使用此代码，它向我显示结束图标（我的主标记），但我无法更改开始图标。有什么想法吗？

Answer 1

作为字符串的

start位置可用于DirectionsService，但对于标记，您必须将位置更改为LatLng。

请参阅Geocoding Service

对于地理编码，添加新的全局变量：

...
var map;
var geocoder;

并初始化它：

function initialize() {
    geocoder = new google.maps.Geocoder();

    directionsDisplay = new google.maps.DirectionsRenderer({draggable: true, suppressMarkers: true});
...

在directionsService.route()之后获取开始'地址'的latlng：

    geocoder.geocode( { 'address': start}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            var starticon = new google.maps.MarkerImage('images/start.png');
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map:   map,
                icon: starticon
            });
        } else {
            alert("Geocode failed with status: " + status);
        }
    });

见example at jsBin。注意：它不会在那里工作，因为我使用我的图标图像，所以放入图标图像的路径。

谷歌地图方向

1 个答案: