Как добавить фоновое изображение в маркеры карт Google?

Я использую foursquare API, чтобы показать некоторые места на карте. Когда я попытался отобразить значки в категориях, некоторые изображения выдают 404. Пример:

https://foursquare.com/img/categories_v2/shops/mall.png

Поэтому я меняю шаблон, чтобы он соответствовал этому пути, который Foursquare использует для своих значков:

https://foursquare.com/img/categories_v2/shops/mall_32.png

Проблема в том, что эти значки имеют прозрачный фон (что выглядит сбивающим с толку), и я хочу знать, как прикрепить эти маркеры к фону.

Спасибо!

ПД: Я не хочу использовать тени, потому что прочитал, что это не рекомендуется.


person Beto Aveiga    schedule 08.10.2013    source источник


Ответы (1)


Маркеры карты Google размещаются как элементы Canvas, а не элементы DOM, и нет прямого эквивалента фонового изображения.

Вы можете попробовать одно из двух:

  • Создайте собственное изображение маркера с ореолом или прямоугольником фона, затем укажите свое изображение как icon при создании маркеров (см. параметры маркера документации).

  • Затем создайте background изображение общего назначения без переднего плана, для каждого необходимого маркера создайте два маркера, расположенных так, чтобы передний план перекрывал фон.

Первый подход более эффективен и, как правило, предпочтительнее.

Второй подход может быть полезен, если у вас есть много типов маркеров и вы хотите, чтобы каждый из них был установлен на одном и том же фоновом изображении. Это было бы неэффективно с точки зрения клиентского ЦП и ОЗУ, но сэкономило бы ваше время при подготовке иллюстраций.

person Beetroot-Beetroot    schedule 08.10.2013
comment
Спасибо Beetroot! Я думал о том же решении, через несколько часов я публикую этот вопрос, очевидно, первый подход. Я загружаю значки категорий Foursquare на свой сервер, а затем (с помощью Drupal) применяю стиль изображения с маркером на заднем плане. - person Beto Aveiga; 09.10.2013