Как я могу изменить цвет маркера Google Maps?

Question

Я использую API Карт Google для создания карты, полной маркеров, но я хочу, чтобы один маркер выделялся среди других. Простейшая вещь, я думаю, должна была бы изменить цвет маркера на синий, а не красный. Это простая вещь, или я должен как-то создать совершенно новый значок? Если мне нужно создать новый значок, что это самый простой способ сделать это?

Answer 1

Поскольку карты v2 является устаревшим, вы, вероятно, заинтересованы в v3 карты: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

Для v2 карт:

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

Вы бы один набор логики делать все «обычные» булавки , а другой - специальный флажок (ы), определяющий новый маркер.

Answer 2

MapIconMaker: библиотека для Google Maps v2

Один из способов заключается в использовании MapIconMaker. Пример: here. Google Maps по умолчанию иконки 20px ширины и 34px по высоте, так что вы могли бы использовать что-то вроде этого, чтобы подражать:

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"}); 
var marker = new GMarker(map.getCenter(), {icon: newIcon}); 

Вы даже могли обернуть его в какой-то функции, чтобы сделать вещи еще проще на себя:

function getIcon(color) { 
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color}); 
} 

Это то, что я лично использую для всех создаваемых мной маркеров. Я предпочитаю иметь возможность менять цвета прихоти.

Обновление: Цвет шестнадцатеричного значка по умолчанию - «# FE7569». Кроме того, вы можете setImage на маркерах, а не создавать новый маркер с новым значком. Так что если вы хотите, чтобы функция, чтобы выделить вы могли бы пойти с чем-то вроде этого, с помощью функции выше:

function highlightMarker(marker, highlight) { 
    var color = "#FE7569"; 
    if (highlight) { 
     color = "#0000FF"; 
    } 
    marker.setImage(getIcon(color).image); 
} 

StyledMarker: библиотека для Google Maps v3

Поскольку V2 был заменен V3 некоторое время назад я думал Я должен обновить этот ответ. Я создал библиотеку для пользовательских маркеров, которые можно найти в V3 Utility Library here. Он позволяет использовать разные цвета и формы, а также размещать текст на маркере. Он работает с использованием API графиков Google, в котором есть методы для создания маркеров типа Google Maps. Не стесняйтесь смотреть исходный код, если вы предпочитаете использовать API Google Chart напрямую.

Вещь в этой библиотеке заключается в том, что она заботится о том, чтобы определить для вас кликабельные области этих изображений маркеров для вас, так что, например, более длинный пузырь с текстом будет иметь области, которые можно щелкнуть, например, this example.

Answer 3

С версией 3 API Карт Google, самым простым способом сделать это, может быть, захватывая набор пользовательских иконок, как и тот, что Бенджамин Кина создал здесь:

http://www.benjaminkeen.com/?p=105

Если вы поставите все эти значки в том же месте, на странице карты, вы можете раскрасить маркер, просто используя соответствующий вариант значка при его создании:

var beachMarker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: 'brown_markerA.png' 
}); 

Это супер-легкий, и подход я использую для проекта, в котором я работаю в настоящее время.

Answer 4

Лично я считаю, что значки, созданные API Google Chart, выглядят великолепно и легко настраиваются динамически.

Смотрите мой ответ на Google Maps API 3 - Custom marker color for default (dot) marker

Answer 5

Самый простой способ я нашел, чтобы использовать BitmapDescriptorFactory.defaultMarker() для documentation даже есть пример настройки цвета. Из моего собственного кода:

MarkerOptions marker = new MarkerOptions() 
      .title(formatInfo(data)) 
      .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)) 
      .position(new LatLng(data.getLatitude(), data.getLongitude())) 

Answer 6

Вам не нужны специальные библиотеки для Google Maps v3.

var pinColor = "FE7569"; 
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, 
    new google.maps.Size(21, 34), 
    new google.maps.Point(0,0), 
    new google.maps.Point(10, 34)); 
var 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)); 
var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(0,0), 
      map: map, 
      icon: pinImage, 
      shadow: pinShadow 
     }); 

из Matt Burns Это работает как в октябре 2014 года, но осуждается.