什么jQuery map插件允许指定图钉的颜色?

时间:2013-11-04 16:13:34

标签: asp.net google-maps jquery-plugins bing-maps pushpin

我已经使用goMap jQuery插件在Google地图上轻松简单地编写了图钉;我打算创建一个网站,同时显示各种“类别”的地方,我想通过使每个组/类别成为不同的颜色来直观地区分它们。

是否有人知道如何在goMap中完成此操作,或者哪个jQuery插件可以实现?我没跟谷歌地图结婚; Bing地图也没问题。

2 个答案:

答案 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?