改变谷歌地图标记颜色

小开

最佳答案

在 Google Maps API v3中，你可以尝试更改标记图标，例如绿色图标的使用:

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

或者作为标记 init 的一部分:

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

其他颜色:

等等。

小开

可以使用 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
});

其他可能性见这一页。

小开

你可以用这个代码，它工作得很好。

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


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

请看这里的例子

小开

我有4艘船设置在一个单一的地图，所以我使用谷歌开发人员的例子，然后扭曲它

Https://developers.google.com/maps/documentation/javascript/examples/icon-complex

在下面的函数中，我设置了3个颜色选项:

function setMarkers(map, locations) {
...
var image = {
url: 'img/bullet_amarelo.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(40, 40),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 40)
};
var image1 = {
url: 'img/bullet_azul.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(40, 40),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 40)
};
var image2 = {
url: 'img/bullet_vermelho.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(40, 40),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 40)
};
var image3 = {
url: 'img/bullet_verde.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(40, 40),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 40)
};
...
}

在 FOR 风箱中，我为每艘船设置了一种颜色:

for (var i = 0; i < locations.length; i++) {
...
if (i==0) var imageV=image;
if (i==1) var imageV=image1;
if (i==2) var imageV=image2;
if (i==3) var imageV=image3;
...
# remember to change icon: image to icon: imageV
}

最终结果:

Http://www.mercosul-line.com.br/site/teste.html

小开

我建议使用谷歌图表 API，因为您可以指定文本、文本颜色、填充颜色和轮廓颜色，所有这些都使用十六进制颜色代码，例如 # FF0000表示红色。你可以这样称呼它:

function getIcon(text, fillColor, textColor, outlineColor) {
if (!text) text = '•'; //generic map dot
var iconUrl = "http://chart.googleapis.com/chart?cht=d&chdp=mapsapi&chl=pin%27i\\%27[" + text + "%27-2%27f\\hv%27a\\]h\\]o\\" + fillColor + "%27fC\\" + textColor + "%27tC\\" + outlineColor + "%27eC\\Lauto%27f\\&ext=.png";
return iconUrl;
}

然后，当您创建您的标记时，您只需设置图标属性，其中 myColor 变量是十六进制值(减去哈希符号) :

var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
animation: google.maps.Animation.DROP,
map: map,
icon: getIcon(null, myColor, myColor2, myColor3)
});

如果您只需要设置文本和填充颜色，那么可以使用 http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000作为替代 URL，这样比较容易破译。

Khurram 的回答是指一个重定向到 Google 图表 API 的第三方站点。这意味着如果那个人关闭了他们的服务器，你就完蛋了。我更喜欢 Google API 提供的灵活性，以及直接访问 Google 的可靠性。只要确保为每种颜色指定一个值，否则就不起作用。

小开

您可以使用谷歌图表 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'
});

小开

Var map _ mark= $(“ . map-mark”) . children (“ img”) . attr (“ src”) Var pinImage = new google.map. MarkerImage (map _ mark) ;

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

小开

我真的很喜欢 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 路径复制到代码中的路径中，但是这可以用于任何你放在 icon 对象的“ path”属性中的 SVG 路径。

结果如下:

小开

要扩展已接受的答案，可以使用 http://chart.googleapis.com上的 API 创建任意颜色的自定义 MarkerImages

除了改变颜色，这也改变了标记的形状，这可能是不必要的。

const marker = new window.google.maps.Marker(
position: markerPosition,
title: markerTitle,
map: map)
marker.addListener('click', () => marker.setIcon(changeIcon('00ff00'));)


const changeIcon = (newIconColor) => {
const newIcon = new window.google.maps.MarkerImage(
`http://chart.googleapis.com/chart?
chst=d_map_spin&chld=1.0|0|${newIconColor}|60|_|%E2%80%A2`,
new window.google.maps.Size(21, 34),
new window.google.maps.Point(0, 0),
new window.google.maps.Point(10, 34),
new window.google.maps.Size(21,34)
);
return newIcon
}

资料来源: 谷歌地图 apis 上的免费无畏课程

小开

we can do this by adding an icon property and specifying a URL like mention below:

图标: {
Http://maps.google.com/mapfiles/ms/icons/blue-dot.png"

let map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});


let marker = new google.maps.Marker({
map: map,
position: {lat: -34.397, lng: 150.644},
icon: {
url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
}
});
}