Карты Google: граница с маркерами

Я пытаюсь отображать фотографии в качестве маркеров на Картах Google. Это не проблема, переопределяя маркер как изображение, но я хочу поместить какую-то границу или тень, чтобы они выглядели лучше. Что-то вроде фотографий Google было бы лучше, но я думаю, это слишком сложно, если это вообще возможно. Простая 1px сплошная граница будет хорошо. Один из вариантов - фактически изменить изображение, но это не вариант. Кроме того, изображения разных размеров, поэтому я не могу поместить черное изображение в качестве тени (на 1px больше оригинала).

Вот идея:

ТОК:

enter image description here

СМОТРЕТЬ ДЛЯ:

enter image description here

EVEN COOLER:

enter image description here

ИДЕАЛЬНЫЙ МИР:

enter image description here

Возможно ли это?

Ответы

Ответ 1

Посмотрите на библиотеку Rich Marker v3 демо (фактическая библиотека), которая позволяет использовать пользовательский html в качестве маркера.

Установка маркера html

<img 
  src="http://www.picturesofengland.com/img/S/1015720.jpg" 
  style="border:2px solid white;
  -moz-box-shadow:0px 0px 10px #000;
  -webkit-box-shadow:0px 0px 10px #000;
  box-shadow:0px 0px 10px #000;" 
/>

и нажав кнопку переключения (опция в библиотеке api) будет делать то, что вы хотите.. вы, естественно, изменяете изображение src;)

для большего количества библиотек смотрите http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

Ответ 2

Вы хотите использовать im (ImageMagick), чтобы автоматически создать границу для изображения.

Ответ 3

@Cinetik comment заставило меня преодолеть концептуальный барьер. Я тоже пытался использовать RichMarkers в моем приложении, и я тоже пытался их оживить. Когда я обнаружил, что RichMarker setAnimation работает не просто, я тоже был в ярости. Затем я сделал этот комментарий выше,

"Я бы хотел иметь свой богатый маркер и оживить его"

и понял мое заблуждение. Я передаю свой ответ потомству:

Google map Marker имеет всевозможные сумасшедшие функции, например готовые анимации. Это не позволяет использовать HTML/CSS/JS однако, поскольку он не создает чистых HTML-маркеров. Если вы этого хотите, вам понадобится RichMarker. Проблема в том, что вы не можете вы торт и съедите его тоже. Если вы выберете RichMarker элегантно Интеграция HTML/CSS/JS, вы автоматически отказываетесь от некоторых более приятные черты простого маркера. Вы можете реализовать их самостоятельно, если вы хотите, и эта свобода именно поэтому вы выбрали RichMarker, в первую очередь, не так ли?

Итак, вот какой-то код для добавления анимации Bounce в RichMarker с помощью jQuery и потрясающего " bez 'плагина от rdallasgray.

// create a marker using our element
var marker = new RichMarker({
    content: $("myElement").get(0)
});

// now animate that element!
$("#myElement").animate({ left: -100 }, 500, $.bez([0,0,0.6,1]));

Я надеюсь, что это поможет кому-то!