Какой плагин карты jQuery позволяет указать цвет кнопок?

Question

Я использовал плагин goMap jQuery для легкого и простого программного размещения кнопок на картах Google; Я собираюсь создать сайт, где различные "категории" мест показываются одновременно, и я хочу различать их визуально, делая каждую группу / категорию разным цветом.

Кто-нибудь знает, как это можно сделать в goMap, или какой плагин jQuery делает это возможным? Я не женат на картах Google; Карты Bing тоже подойдут.

Answer 1

Кажется, есть две хорошие возможности. Одним из них является использование 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, который я уже использовал, у которого есть свойство icon, которое вы можете установить в файл.png. Пример можно увидеть здесь: http://www.pittss.lv/jquery/gomap/examples/marker_multi.php с использованием такого вида кода:

  $ (function () {$ ("# map"). goMap ({markers: [{
  широта: 56.948813, долгота: 24.704004, название: "маркер название 1"},{адрес: "Мокелум Хилл, Калифорния, США", название: "маркер название 1"},{широта: 55.548813, долгота: 23.204004, перетаскиваемый: правда, icon: '../img/drag.png', html: { content: 'drag me!', popup:true } }], icon: '../img/apartment.png' }); });

Теперь у меня есть отдельный вопрос, касающийся того, как использовать спрайт с изображениями меток ( Как я могу использовать спрайт, чтобы указать png, который я хочу использовать на карте?)

Answer 2

Вам действительно не нужен плагин, просто создайте различные маркеры в вашем 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,
});