绘图库:动态绘制不同的标记在谷歌地图api 3

Drawing Library: Dynamically drawing different markers in Google maps api 3

本文关键字：谷歌地图 api 动态 绘制 绘图      更新时间：2023-09-26

我正在使用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);

});

有解决方法吗?

用所需的Icon更新DrawingManager -实例的markerOptions -属性

基本用法:

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

演示: http://jsfiddle.net/doktormolle/A2Xhv/

相关文章：