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

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

155
google-maps google-maps-api-2

7 ответов

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

для карт v2:

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

У вас будет один набор логики делать все "регулярные" контакты, а другой, который делает "специальный" pin(ы), используя новый маркер.

43

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

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

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

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

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

116

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

один из способов-это использовать MapIconMaker. Вот пример здесь. Значки 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});
}

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

Update: шестнадцатеричный цвет значка по умолчанию - "#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 здесь. Он позволяет использовать различные цвета и формы, а также размещать текст на маркере. Он работает с помощью Google Charts API, который имеет методы для создания маркеров типа Google Maps. Не стесняйтесь смотреть на исходный код, если вы предпочитаете использовать Google Charts API напрямую.

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

50

(устарело) вам не нужны пользовательские библиотеки для 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
        });

С Мэтт Бернс Это работает по состоянию на октябрь 2014 года, но устарело.

25

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

см. мой ответ на Google Maps API 3-пользовательский цвет маркера для маркера по умолчанию (точка)

23

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

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

чтобы настроить маркеры, вы можете сделать это с помощью этого онлайн-инструмента:https://materialdesignicons.com/

в вашем случае, вы хотите, чтобы карта-маркер который доступен здесь:https://materialdesignicons.com/icon/map-marker и который вы можете настроить онлайн.

Если вы просто хотите изменить по умолчанию красный цвет на синий, вы можете загрузить этот значок: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

Это было упомянуто в этой теме:https://stackoverflow.com/a/32651327/6381715

2