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

Question

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

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

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

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

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

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

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

Answer 3

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

Один из способов - использовать Mapiconmaker. Анкет Есть пример здесь. Анкет Карты Google значны по умолчанию шириной 20 % и высоте 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". Кроме того, вы можете смягчить маркер, а не создавать новый маркер с новым значком. Так что, если вы хотите выделить функцию, вы можете пойти с чем -то вроде этого, используя функцию выше:

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

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

Поскольку V2 был заменен V3 некоторое время назад, я подумал, что должен обновить этот ответ. Я создал библиотеку для пользовательских маркеров, которые можно найти в библиотеке утилит V3 здесь. Анкет Это допускает разные цвета и формы, и вы также можете разместить текст на маркер. Он работает, используя API Google Charts, который имеет методы создания маркеров типа карт Google. Не стесняйтесь смотреть на исходный код, если вы предпочитаете использовать API Google Charts напрямую.

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

Answer 4

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

Отредактировано в марте 2019 года Теперь с программным цветом штифта,

Pure 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 - Пользовательский цвет маркера для маркера по умолчанию (DOT)

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/

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

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

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