Javascript,更改谷歌地图标记颜色

Question

我是否知道通过Javascript更改Google地图标记颜色的方法..我是新来的,任何帮助将非常感谢,谢谢.

我使用以下代码创建标记

 marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], 
     locations[i][2]),
     animation: google.maps.Animation.DROP,
     map: map
 });

Answer 1

在Google Maps API v3中,您可以尝试更改标记图标.例如,绿色图标使用:

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

或者作为标记初始化的一部分:

marker = new google.maps.Marker({
    icon: 'http://...'
});

其他颜色:

• http://maps.google.com/mapfiles/ms/icons/blue-dot.png
• http://maps.google.com/mapfiles/ms/icons/red-dot.png

等等.

Answer 2

您可以使用该strokeColor属性:

var marker = new google.maps.Marker({
    id: "some-id",
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        strokeColor: "red",
        scale: 3
    },
    map: map,
    title: "some-title",
    position: myLatlng
});

有关其他可能性,请参阅此页面

Answer 3

您可以使用此代码,它工作正常.

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });

见这里的例子

Answer 4

您可以使用谷歌图表api并使用rgb代码生成任何颜色:

示例:带#ddd颜色的标记:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd

包括如上所述

 var marker = new google.maps.Marker({
    position: marker,
    title: 'Hello World',
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd'
});

Answer 5

我真的很喜欢 Bahad?r Ya?an 给出的答案，但我不喜欢依赖 Google 提供的一组有限的图标或外部 API 来生成我的标记图标。这是最初的解决方案：

var marker = new google.maps.Marker({
    id: "some-id",
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        strokeColor: "red",
        scale: 3
    },
    map: map,
    title: "some-title",
    position: myLatlng
});

这是我改进的解决方案：

var marker = new google.maps.Marker({
            position: myLatlng,
            icon:{
                path: 'm 12,2.4000002 c -2.7802903,0 -5.9650002,1.5099999 -5.9650002,5.8299998 0,1.74375 1.1549213,3.264465 2.3551945,4.025812 1.2002732,0.761348 2.4458987,0.763328 2.6273057,2.474813 L 12,24 12.9825,14.68 c 0.179732,-1.704939 1.425357,-1.665423 2.626049,-2.424188 C 16.809241,11.497047 17.965,9.94 17.965,8.23 17.965,3.9100001 14.78029,2.4000002 12,2.4000002 Z',
                fillColor: '#00FF00',
                fillOpacity: 1.0,
                strokeColor: '#000000',
                strokeWeight: 1,
                scale: 2,
                anchor: new google.maps.Point(12, 24),
            },
        });

我想要一个特定的图钉图标，所以我使用inkscape制作了一个图标，然后打开SVG文件并将svg路径复制到代码中的路径中，但这适用于您放入“path”属性的任何SVG路径图标对象。

结果如下：