Как я могу изменить цвет маркера Google Maps?
Я использую Google Maps API для создания карты, полной маркеров, но я хочу, чтобы один маркер стоял из других. Самая простая вещь сделать, я думаю, состояла бы в том, чтобы изменить цвет маркера к синему вместо красного. Действительно ли это - простая вещь сделать, или сделать я должен создать совершенно новый значок так или иначе? Если я действительно должен создать новый значок, что самый легкий путь состоит в том, чтобы сделать это?
2 ответа
Поскольку карты версии 2 устарели, вас, вероятно, заинтересуют карты версии 3: https://developers.google.com/maps/documentation/javascript/markers#simple_icons
Для карт версии 2:
http : //code.google.com/apis/maps/documentation/overlays.html#Icons_overview
У вас должен быть один набор логики для всех «обычных» контактов, а другой - для «специальных» контактов. используя новый определенный маркер.
MapIconMaker: библиотека для Google Maps v2
Один из способов - использовать MapIconMaker . Здесь есть пример . Значки Google Maps по умолчанию имеют ширину 20 пикселей и высоту 34 пикселя, так что вы можете использовать что-то вроде этого для эмуляции:
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". Кроме того, вы можете установить изображение на маркер, а не создавать новый маркер с новым значком. Итак, если вы хотите, чтобы функция выделялась, вы можете использовать что-то вроде этого, используя приведенную выше функцию:
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 здесь . Он позволяет использовать разные цвета и формы, а также вы можете размещать текст на маркере. Он работает с использованием Google Charts API, в котором есть методы для создания маркеров типа Google Maps. Не стесняйтесь взглянуть на исходный код, если вы предпочитаете напрямую использовать Google Charts API.
Однако особенность этой библиотеки заключается в том, что она определяет для вас интерактивные области этих изображений маркеров, поэтому, например, более длинный пузырь с текстом будет иметь ожидаемые области для щелчка, например этот пример .