javascript - 如何自定义谷歌地图标记的颜色、形状和大小

Question

我想要一个圆形标记，它的大小和颜色可以在 javascript 中动态更改。以前有没有人这样做过，或者可以指出我正确的资源？

到目前为止，我有：（据此：https ://developers.google.com/maps/documentation/javascript/overlays#Icons ）

//Map setup
    focusLocation = new google.maps.LatLng(51.5, -0.1);
    var mapOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: focusLocation
    };
    map = new google.maps.Map(document.getElementById('map'),mapOptions);

        setMarkers(map);

function setMarkers(map){
    marker = new google.maps.Marker({
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 10
        },
        map: map
    });
});

但是图标和平常一样。

Answer 1

Your marker doesn't have a position. This works for me:

function setMarkers(map){
    marker = new google.maps.Marker({
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 10
        },
        position: map.getCenter(),
        map: map
    });
});

working example

Answer 2

您可以使用此处所述的 javascript api 更改标记图标

https://developers.google.com/maps/documentation/javascript/reference#Marker

专门调用 SetIcon() 方法。