Карты Google: граница на маркерах - PullRequest
Новая
       27

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

13 голосов
/ 16 мая 2011

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

Вот идея:

CURRENT:

enter image description here

ИЩЕТ:

enter image description here

ДАЖНЫЙ ОХЛАДИТЕЛЬ:

enter image description here

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

enter image description here

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

Ответы [ 3 ]

7 голосов
/ 16 мая 2011

Взгляните на библиотеку Rich Marker v3 demo ( актуальная библиотека ), которая позволяет использовать пользовательский 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

1 голос
/ 18 ноября 2013

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

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

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

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

Итак, вот некоторый код для добавления анимации отказов в 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]));

Надеюсь, это кому-нибудь поможет!

0 голосов
/ 16 мая 2011

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

...