将Google地图标记颜色更改为我选择的颜色 [英] change google map marker color to a color of my choice
本文介绍了将Google地图标记颜色更改为我选择的颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以从默认的红色标记颜色更改为我选择的十六进制颜色?我一直在寻找整个堆栈溢出,我似乎还没有找到答案.这就是我到目前为止所拥有的.
Is there anyway to change from the default red marker color to a hexidecimal color of my choice? I've been looking all over stack overflow and I haven't seem to find an answer. This is what I have so far.
var marker = new google.maps.Marker({
position: myLatLng,
label: '23',
map: map
});
推荐答案
一种选择是为标记图标定义SVG符号.可以在其构造函数中设置SVG图标颜色.
One option would be to define an SVG symbol for the marker icon. SVG icon colors can be set in their constructor.
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1
};
}
然后像这样使用它:
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.5, -122.0),
icon: pinSymbol('green')
});
代码段:
function initialize() {
var latlng = new google.maps.LatLng(47.605, -122.2);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: pinSymbol('red')
});
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.5, -122.0),
icon: pinSymbol('#7CFC00')
});
var marker2 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.6, -122.3),
icon: pinSymbol('orange')
});
var marker3 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.7, -122.1),
icon: pinSymbol('yellow')
});
}
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1
};
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
这篇关于将Google地图标记颜色更改为我选择的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文