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

Question

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

Поскольку карты 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 4

Материал Дизайн

РЕДАКТИРОВАННОЕ МАРТ 2019 теперь с программным цветом булавки,

ЧИСТЫЙ JAVASCRIPT, НЕ ИЗОБРАЖЕНИЯ, ПОДДЕРЖИВАЕТ ЭТИКЕТКИ

больше не использует устаревший API диаграмм

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });

Answer 5

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

См. Мой ответ на Google Maps API 3 - Цвет настраиваемого маркера по умолчанию (точка)маркер

Answer 6

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

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

Answer 7

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

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

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

Это упоминалось в этой теме:https://stackoverflow.com/a/32651327/6381715