Как изменить изображение маркера начала и конца в Google Maps v3 API для маршрутов

Question

При использовании DirectionsRender у меня хорошо намечен маршрут, но я не могу выяснить, как заменить общие маркеры Google на свои.

Я знаю и использую это в обычной ситуации с Google Map, но мне сложно это сделать с помощью маркеров направления для начала и конца.

Спасибо за любые советы, советы или насмешливые, если это глупый вопрос: D

Michael

Answer 1

DirectionRender принимает опцию под названием markerOptions. Цитирование из документации API:

Все маркеры, представленные DirectionsRenderer, будут использовать эти опции.

Итак, если вы хотите установить маркеры, используйте MarkerImage (как указал филар).

Другой вариант - передать suppressMarkers: true опциям DirectionRender, а затем просто использовать свои собственные маркеры.

Answer 2

Сначала вам нужно добавить это на DirectionsRenderer

directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true}); 
//to hide the default icons

затем после опций и т.д ...

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//you set your custom image
var image = new google.maps.MarkerImage('images/image.png',
                    new google.maps.Size(129, 42),
                    new google.maps.Point(0,0),
                    new google.maps.Point(18, 42)
                );

//you set your icon for each of the direction points Origin
                var marker1 = new google.maps.Marker({
                    position: new google.maps.LatLng(19.432651,-99.133201),
                    map: map,
                    icon: image
                });
//you set your icon for each of the direction points Destination,
                var marker2 = new google.maps.Marker({
                    position: new google.maps.LatLng(45.508648,-73.55399),
                    map: map,
                    icon: image
                });

Вы также можете добавить различные значки для отправления и назначения. Просто играйте с изображением, это работает для меня!

Answer 3

это то, как вам нужно приблизиться к нему

Объявите все значки изображений, как показано ниже

var movingIcon = new google.maps.MarkerImage('/img/icon_moving.jpg');
var startIcon = new google.maps.MarkerImage('/img/icon_start.png');

Затем при создании маркера используйтеопция значка, чтобы установить конкретное изображение для этого маркера

marker = new google.maps.Marker({
            position: point,
            map: map,
            icon: movingIcon
            });