我已经使用goMap jQuery插件在Google地图上轻松简单地编写了图钉;我打算创建一个网站,同时显示各种“类别”的地方,我想通过使每个组/类别成为不同的颜色来直观地区分它们。
是否有人知道如何在goMap中完成此操作,或者哪个jQuery插件可以实现?我没跟谷歌地图结婚; Bing地图也没问题。
答案 0 :(得分:1)
您不需要插件,只需在js中创建不同的标记,例如:
App.pinColor1 = '37BDED';
App.pinColor2 = 'AA0774';
App.pinImage1 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=home|" + App.pinColor1,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
App.pinImage2 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=books|" + App.pinColor2,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
App.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));
然后在哪里创建标记(以及其他选项):
App.marker = new google.maps.Marker(
{
icon: App.pinImage1,
shadow: App.pinShadow,
});
答案 1 :(得分:0)
似乎有两个好的可能性。一种是使用gmaps.js(http://hpneo.github.io/gmaps/examples/static_markers.html),它允许你指定一种颜色(在下面添加的三个标记中的第三个):
url = GMaps.staticMapURL({
size: [610, 300],
lat: -12.043333,
lng: -77.028333,
markers: [
{lat: -12.043333, lng: -77.028333},
{lat: -12.045333, lng: -77.034, size: 'small'},
{lat: -12.045633, lng: -77.022, color: 'blue'}
]
});
另一个是goMaps,我已经使用过了,它有一个你可以设置为.png文件的图标属性。这个例子可以在这里看到:http://www.pittss.lv/jquery/gomap/examples/marker_multi.php 使用这种代码:
$(function(){
$( “#图”)。goMap({
标记:[{
纬度:56.948813,
经度:24.704004,
标题:'标题1'
},{
地址:'美国加利福尼亚州Mokelumne Hill',
标题:'标题1'
},{
纬度:55.548813,
经度:23.204004,
draggable:是的,
icon:'.. / img / dr.png',
html:{
内容:'拖我!',
弹出:真
}
}],
图标:'../img / apartment.png'
});
});
现在我有一个单独的问题,关于如何使用一大堆图钉图像(How can I use a sprite to specify the pushpin png I want to use in a map?)