Google maps api 3 谷歌地图API 3-默认(点)标记的自定义标记颜色
我见过很多其他类似的问题(,和),但他们都接受了无法解决我问题的答案。我发现解决这个问题的最好办法是使用这个库,它确实可以让你为标记定义自定义颜色,但我不能让它使用默认标记(你在谷歌地图搜索时得到的标记,中间有一个点),它似乎只提供了一个字母,或者用一个特殊的图标。我能用StyledMarker得到的最接近的东西是 中间的子弹不像默认的那么大。StyledMarker类只是构建这个url,并要求GoogleAPI创建标记 使用“%E2%80%A2”作为文本,如:Google maps api 3 谷歌地图API 3-默认(点)标记的自定义标记颜色,google-maps-api-3,Google Maps Api 3,我见过很多其他类似的问题(,和),但他们都接受了无法解决我问题的答案。我发现解决这个问题的最好办法是使用这个库,它确实可以让你为标记定义自定义颜色,但我不能让它使用默认标记(你在谷歌地图搜索时得到的标记,中间有一个点),它似乎只提供了一个字母,或者用一个特殊的图标。我能用StyledMarker得到的最接近的东西是 中间的子弹不像默认的那么大。StyledMarker类只是构建这个url,并要求GoogleAPI创建标记 使用“%E2%80%A2”作为文本,如: var styleMaker2
var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});
您需要修改StyledMarker.js以注释掉以下行:
if (text_) {
text_ = text_.substr(0,2);
}
因为这会将文本字符串修剪为2个字符
或者,您可以基于默认标记图像创建自定义标记图像,并使用以下代码覆盖默认标记:
marker = new google.maps.Marker({
map:map,
position: latlng,
icon: new google.maps.MarkerImage(
'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
new google.maps.Size(24, 24),
new google.maps.Point(0, 0),
new google.maps.Point(0, 24)
)
});
您可以使用URL从动态请求图标图像:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569
如下所示:图像为21x34像素,针尖位于位置(10,34)
您还需要一个单独的阴影图像(这样它就不会与附近的图标重叠):
如下所示:图像为40x37像素,针尖位于位置(12,35)
在构造s时,需要相应地设置大小和定位点:
var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
然后,您可以使用以下方法将标记添加到地图中:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map,
icon: pinImage,
shadow: pinShadow
});
只需将“FE7569”替换为您想要的颜色代码即可。例如:
因灵感而产生的信用;) 将路径更改为chart.googleapis.com,否则SSL将不起作用如果使用Google Maps API v3,则可以使用
设置图标
例如
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
或作为标记初始化的一部分:
marker = new google.maps.Marker({
icon: 'http://...'
});
其他颜色:
(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
你可以使用这段代码,它工作得很好
var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>
var marker = new google.maps.Marker({
position: yourlatlong,
icon: pinImage,
map: map
});
var pinImage=new google.maps.MarkerImage(“http://www.googlemapsmarkers.com/v1/009900/");
var marker=new google.maps.marker({
职位:yourlatlong,
图标:pinImage,
地图:地图
});
自google maps API 3.11版以来,图标
对象取代了标记图像
。图标支持与MarkerImage相同的参数。我甚至觉得它更直截了当一点
一个例子如下所示:
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
有关更多信息,请参见下面使用Gooogle Maps API本身的一个不错的解决方案。没有外部服务,没有额外的图书馆。它还支持自定义形状、多种颜色和样式。该解决方案使用矢量标记,Google映射api调用 除了少数且有限的预定义符号外,您还可以通过指定SVG路径字符串()来制作任何颜色的任何形状 要使用它,您可以将其设置为包含符号选项的字典,而不是将“图标”标记选项设置为图像url。例如,我设法制作了一个与标准标记非常相似的符号:
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 M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1,
};
}
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
icon: pinSymbol("#FFF"),
});
如果您小心地将形状关键点保持在0,0,则可以避免定义标记图标居中参数。另一个路径示例,不带点的相同标记:
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',
这里有一面非常简单又难看的彩旗:
path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',
您还可以使用可视化工具(GNU-GPL,multiplatform)创建路径。一些有用的提示:
- GoogleAPI只接受一条路径,所以您必须将任何其他对象(正方形、圆点…)转换为一条路径,并将它们作为一条路径连接起来。路径菜单上的两个命令
- 要将路径移动到(0,0),请转到路径编辑模式(F2)全选 单击控制节点并拖动它们。使用F1移动对象不会更改路径节点坐标
- 要确保参考点位于(0,0),可以单独选择它并手动在顶部工具栏上编辑坐标
- 保存SVG文件(XML)后,用编辑器打开它,查找SVG:path元素并复制“d”属性的内容
使用swift和Google Maps Api v3,这是我能够做到的最简单的方法:
icon = GMSMarker.markerImageWithColor(UIColor.blackColor())
希望它能帮助别人。您好,您可以使用图标作为SVG并设置颜色。请参阅此代码
/*
*将map和places声明为全局变量
*/
var映射;
变量位置=[
['Place 1','Title 1',-0.690542,-76.174856,“红色”],
['Place 2',“Title 2”,-5.028249,-57.659052,“blue”],
[Place 3',“Title 3”,-0.028249,-77.757507,“绿色”],
[Place 4',“Title 4”,-0.800101286,-76.78747820,“orange”],
['Place 5',“Title 5”,-0.950198,-78.959302,“#FF33AA”]
];
/*
*使用GoogleMapsAPI内置机制来附加dom事件
*/
google.maps.event.addDomListener(窗口,“加载”,函数(){
/*
*创建地图
*/
var map=new google.maps.map(document.getElementById(“map_div”){
mapTypeId:google.maps.mapTypeId.ROADMAP,
});
/*
*创建信息窗口(将由标记使用)
*/
var infoWindow=new google.maps.infoWindow();
/*
*创建边界(将用于自动缩放贴图)
*/
var bounds=new google.maps.LatLngBounds();
/*
*marker creater函数(充当html参数的闭包)
*/
函数createMarker(选项,html){
瓦尔马尔
icon = GMSMarker.markerImageWithColor(UIColor.blackColor())
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==
function customIcon (opts) {
return Object.assign({
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 M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
fillColor: '#34495e',
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1,
}, opts);
}
marker.setIcon(customIcon({
fillColor: '#fff',
strokeColor: '#000'
}));
const marker = new google.maps.Marker({
position: {
lat: ...,
lng: ...
},
icon: customIcon({
fillColor: '#2ecc71'
}),
map: map
});
let circle=true;
path = 'M 0,0 C -0.7,-9 -3,-14 -5.5,-18.5 '+
'A 16,16 0 0,1 -11,-29 '+
'A 11,11 0 1,1 11,-29 '+
'A 16,16 0 0,1 5.5,-18.5 '+
'C 3,-14 0.7,-9 0,0 z '+
['', 'M -2,-28 '+
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];
const marker: Marker = this.map.addMarkerSync({
icon: '#008000',
animation: 'DROP',
position: {lat: 39.0492127, lng: -111.1435662},
map: this.map,
});
GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
.position(latLng)
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));