添加自定义Google Map标记/图钉（颜色）

fred randall 发表于 Dev

弗雷德·兰德尔

我做了一些相当不错的Google地图自定义设置；但我想知道我可以在下面添加的位置/或仅更改地图标记/图钉/或图标。我真的是想改变颜色。但会创建图像并在需要时以这种方式进行操作。

以下是我正在处理的内容；干杯/

window.onload = function() {  

function initialize() {
    var stylez = [
      {
        featureType: "all",
        stylers: [
          { hue: "#c3c367" },
          { saturation: -75 }
        ]
      },
      {
        featureType: "poi",
        elementType: "label",
        stylers: [
          { visibility: "off" }
        ]
      }
    ];

    var latlng = new google.maps.LatLng(34.101958, -118.327925), // toggle per data

        mapOptions = {
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, "Edited"] 
            },
            zoom: 14,
            center: latlng
        },

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions),

        styledMapType = new google.maps.StyledMapType(stylez, {name: "Edited"}),

        marker = new google.maps.Marker({
            position: latlng, 
            map: map, 
            animation: google.maps.Animation.DROP,
            title:"Hello World!"
        }),

        infowindow = new google.maps.InfoWindow({
            content: "<div><img width='50' height='50' src='assets/icos/homico.png'</div>"
        });

        map.mapTypes.set("Edited", styledMapType);
        map.setMapTypeId('Edited');

    function toggleBounce () {
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }

    // Add click listener to toggle bounce
    google.maps.event.addListener(marker, 'click', function () {
        toggleBounce();
        infowindow.open(map, marker);
        setTimeout(toggleBounce, 1500);
    });
}

// Call initialize -- in prod, add this to window.onload or some other DOM ready alternative
initialize();

};

克里斯·史威克斯

您只需要添加

"icon": "url"

标记声明。所以这：

marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        animation: google.maps.Animation.DROP,
        title:"Hello World!"
    })

成为：

marker = new google.maps.Marker({
        position: latlng, 
        map: map,
        icon: yourIconUrl,
        animation: google.maps.Animation.DROP,
        title:"Hello World!"
    })

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。