0

我使用 goMap jQuery 插件在 Google 地图上以编程方式轻松简单地放置图钉；不过，我将创建一个站点，其中同时显示各种“类别”的地点，并且我想通过使每个组/类别具有不同的颜色来在视觉上区分它们。

是否有人知道如何在 goMap 中完成此操作，或者哪个 jQuery 插件使其成为可能？我没有嫁给谷歌地图；必应地图也可以。

4

2 回答 2

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,
});
于 2013-11-04T16:22:49.677 回答
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() { $("#map").goMap({ marker: [{
    latitude: 56.948813, longitude: 24.704004, title: 'marker title 1' },{ address: 'Mokelumne Hill, California, USA',标题：'标记标题 1' }，{ 纬度：55.548813，经度：23.204004，可拖动：true，图标：'../img/drag.png'，html：{ 内容：'拖动我！'，弹出窗口：true } }]，图标：'../img/apartment.png' }); });

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

于 2013-11-04T23:11:14.897 回答