Google maps 添加自定义谷歌地图标记/pin（颜色）

我已经做了相当不错的一些谷歌地图定制；但我想知道我可以在下面添加什么来简单地更改地图标记/pin/或图标。我真的想改变颜色；但我会创造一个形象，并这样做，如果我必须

下面是我的工作内容；干杯/

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();

};

window.onload=function（）{
函数初始化（）{
var stylez=[
{
featureType:“全部”，
样式：[
{hue:#c3c367}，
{饱和度：-75}
]
},
{
特征类型：“poi”，
elementType:“标签”，
样式：[
{可见性：“关闭”}
]
}
];
var latlng=new google.maps.latlng（34.101958，-118.327925），//每个数据切换
映射选项={
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP，“已编辑”]
},
缩放：14，
中心：拉丁
},
map=new google.maps.map（document.getElementById（“map_canvas”）、mapOptions），
styledMapType=new google.maps.styledMapType（stylez，{name:“Edited”}），
marker=新的google.maps.marker({
位置：latlng，
地图：地图，
动画：google.maps.animation.DROP，
标题：“你好，世界！”
}),
infowindow=新建google.maps.infowindow({
内容：“”
});
map.mapTypes.set（“已编辑”，styledMapType）；
map.setMapTypeId（'Edited'）；
函数toggleBounce（）{
if（marker.getAnimation（）！=null）{
marker.setAnimation（null）；
}否则{
setAnimation（google.maps.Animation.BOUNCE）；
}
}
//添加单击侦听器以切换反弹
google.maps.event.addListener（标记，'click'，函数（）{
切换弹跳（）；
信息窗口。打开（地图、标记）；
设置超时（切换弹跳，1500）；
});
}
//调用initialize——在prod中，将其添加到window.onload或其他一些DOM就绪的替代方案中
初始化（）；
};

您只需添加

"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!"
    })

---

我已经回答了一个类似的问题，它能解决你的问题吗

您可以使用以下URL自定义自己的标记：

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|00FF00|000000

chld

参数是要显示在标记中的字母。
在管道之后，第一个RGB代码是标记的颜色，第二个是标记的背景色。最后一个是可选的

因此，您可以像这样创建标记：

var myPin= new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|00FF00|000000");

---

你想怎么用就怎么用

您需要创建一个标记图像：

var image=new google.maps.MarkerImage（img_path+'marker.png'，
//此标记宽48像素，高48像素。
新google.maps.Size（24,24），
//此图像的原点为0,0。
新google.maps.Point（0,0），
//这张图片的锚是12,24处旗杆的底部。
新谷歌地图点（12,24）
);

图像的尺寸和定位点会将自定义图标放置在正确的位置

并在创建标记时指定图标：

var marker=new google.maps.marker({
位置：latlng，
地图：地图，
图标：图像，
//(...)
});

中有一个属性控制pin的颜色

<Marker
  pinColor={isActive ? 'yellow' : 'red'}
  key={`${markerId}-${isActive ? 'active' : 'inactive'}`}
  // ... other props ...
/>