Блог

Главная - Вопросы по программированию - Библиотека рисования: динамическое рисование разных маркеров в Google Maps api 3

Библиотека рисования: динамическое рисование разных маркеров в Google Maps api 3

#javascript #google-maps #google-maps-api-3 #markers

#javascript #google-карты #google-maps-api-3 #маркеры

Вопрос:

Я использую Google Maps api 3, чтобы позволить пользователю динамически рисовать маркеры на карте с помощью инструментов рисования. (ссылка здесь )

Я хочу, чтобы пользователь мог рисовать несколько маркеров с разными значками. Например, он должен уметь рисовать школьный маркер, больничный маркер и т. Д. Каждый значок будет отличаться.

Это то, что я хочу, чтобы пользователь рисовал.

В документах показано, что все маркеры будут иметь один и тот же значок.

Код:

 $(document).ready(function(){

var drawingManager;
var marker = new google.maps.Marker({});
var map;

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(21.0000, 78.0000),
        zoom: 4
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        markerOptions:{
            draggable: true,
        },
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                google.maps.drawing.OverlayType.MARKER
            ]
        }
    });
    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
        var latlng = event.overlay.getPosition()
        console.log(latlng);
    });

}

google.maps.event.addDomListener(window, 'load', initialize);

});

Есть ли обходной путь?

Ответ №1:

Обновите markerOptions -property DrawingManager -экземпляра на желаемый Icon

Базовое использование:

 drawingManagerInstance.setOptions({markerOptions:
                                       {icon:'path/to/another/marker.png'}});

Демонстрация: http://jsfiddle.net/doktormolle/A2Xhv /

Комментарии:

1. В этом случае все маркеры будут иметь один и тот же значок. Я хочу нарисовать несколько типов маркеров на одной карте.

2. Нет, они не будут. Как только маркер был нарисован, на него не влияют изменения MarkerOptions

3. Я совершенно не понимаю. Я обновил свой код. Вы хотите сказать, что в MarkerOptions я должен указать значок: ‘link_to_my_image’?

4. не непосредственно в MarkerOptions, когда вы хотите использовать разные маркеры, вы должны динамически обновлять MarkerOptions (например, на основе выбора пользователя) с помощью setOptions

5. Отлично! Большое спасибо! 🙂