jQuery地图插件允许指定图钉的颜色

Question

我使用goMap jQuery插件在谷歌地图上轻松简单地编程放置图钉;不过，我将创建一个网站，其中同时显示各种"类别"的地方，我想通过使每个组/类别具有不同的颜色来直观地区分它们。

有没有人知道如何在goMap中做到这一点，或者哪个jQuery插件使之成为可能？我没有嫁给谷歌地图;必应地图也可以。

Answer 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,
});

Answer 2

似乎有两种很好的可能性。一种是使用 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使用以下代码：

  $（函数（） {$（"#map"）.goMap（{ 标记：[{
  纬度： 56.948813， 经度： 24.704004， 标题："标记标题 1" },{ 地址： '莫克勒姆山， 加利福尼亚州， 美国'， 标题："标记标题 1" },{ 纬度： 55.548813， 经度： 23.204004， 可拖动：真， 图标："../img/drag.png'， html： { 内容："拖我！ 弹出窗口：真 } }], 图标："../img/公寓.png'});});

不过，现在我有一个单独的问题，关于如何使用一堆图钉图像（如何使用精灵来指定我想在地图中使用的图钉 png？