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

Question

Я видел много других вопросов, подобных этому ( здесь , здесь и здесь ), но все они приняли ответы, которые не решить мою проблему. Лучшее решение, которое я нашел для этой проблемы - это библиотека StyledMarker , которая позволяет вам определять собственные цвета для маркеров, но я не могу заставить ее использовать маркер по умолчанию (тот, который вы получаете, когда делаете При поиске в Google Maps - с точкой в ​​середине), кажется, что маркеры снабжены буквой или специальным значком.

Answer 1

Вы можете динамически запрашивать изображения значков из Google диаграмм API с URL:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

Что выглядит следующим образом: изображение имеет размер 21x34 пикселей, а наконечник булавки находится в положении (10, 34)

И вам также понадобится отдельное теневое изображение (чтобы оно не перекрывало соседние значки):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

Что выглядит следующим образом: изображение имеет размер 40x37 пикселей, а наконечник булавки находится в положении (12, 35)

Когда вы создаете MarkerImage s, вам необходимо соответственно установить размер и опорные точки:

    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
            });

Просто замените "FE7569" на цветовой код, который вы ищете. Например:

Кредит за Джек Б Проворный за вдохновение;)

Answer 2

Если вы используете Google Maps API v3, вы можете использовать setIcon например,

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Или как часть маркера init:

marker = new google.maps.Marker({
    icon: 'http://...'
});

Другие цвета:

• Синий маркер
• Красный маркер
• Фиолетовый маркер
• Желтый маркер
• Зеленый маркер

Используйте следующий фрагмент кода для обновления маркеров по умолчанию другими цветами.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

Answer 3

Вот отличное решение с использованием самого API Карт Gooogle.Нет внешнего сервиса, нет дополнительной библиотеки.И это позволяет пользовательские формы и несколько цветов и стилей.В решении используются векторные маркеры, которые googlemaps api вызывает Символы .

Помимо нескольких и ограниченных предопределенных символов, вы можете создать любую форму любого цвета, указав строку пути SVG (Spec ).

Чтобы использовать его, вместо установки параметра маркера 'icon' для URL-адреса изображения, вы устанавливаете его в словарь, содержащий параметры символов.Как пример, мне удалось создать один символ, который очень похож на стандартный маркер:

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   };
}

var marker = new google.maps.Marker({
   map: map,
   position: new google.maps.LatLng(latitude, longitude),
   icon: pinSymbol("#FFF"),
});

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

    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',

И вот у вас есть очень простой и уродливый цветной флаг:

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

Вы также можете создавать пути, используя визуальный инструмент, такой как Inkscape (GNU-GPL, мультиплатформенный).Некоторые полезные советы:

• Google API просто принимает один путь, поэтому вам нужно превратить любой другой объект (квадрат, серкл ...) в путь и соединить их как один.Обе команды в меню Path.
• Чтобы переместить путь к (0,0), перейдите в режим редактирования пути (F2), выберите все узлы управления и перетащите их.Перемещение объекта с помощью F1 не приведет к изменению координат узла пути.
• Чтобы убедиться, что контрольная точка находится в точке (0,0), вы можете выбрать ее отдельно и отредактировать координаты вручную на верхней панели инструментов.
• После сохранения файла SVG, который представляет собой XML, откройте его в редакторе, найдите элемент svg: path и скопируйте содержимое атрибута 'd'.

Answer 4

Ну, самая близкая вещь, которую я смог получить с помощью StyledMarker, это this .

Пуля в середине не такая большая, как по умолчанию. Класс StyledMarker просто создает этот URL и запрашивает API Google для создания маркера .

В примере использования класса используйте "% E2% 80% A2" в качестве текста, например:

var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

Вы будетенеобходимо модифицировать StyledMarker.js, чтобы закомментировать строки:

  if (text_) {
    text_ = text_.substr(0,2);
  }

, так как это обрезает текстовую строку до 2 символов.

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

marker = new google.maps.Marker({
  map:map,
  position: latlng,
  icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 24)
  )
});

Answer 5

Привет, вы можете использовать значок в качестве SVG и установить цвета.Смотрите этот код

/*
 * declare map and places as a global variable
 */
var map;
var places = [
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    /*
     * create infowindow (which will be used by markers)
     */
    var infoWindow = new google.maps.InfoWindow();
    /*
     * create bounds (which will be used auto zoom map)
     */
    var bounds = new google.maps.LatLngBounds();

    /*
     * marker creater function (acts as a closure for html parameter)
     */
    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        bounds.extend(options.position);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
                map.setZoom(map.getZoom() + 1)
                map.setCenter(marker.getPosition());
            });
        }
        return marker;
    }

    /*
     * add markers to map
     */
    for (var i = 0; i < places.length; i++) {
        var point = places[i];
        createMarker({
            position: new google.maps.LatLng(point[2], point[3]),
            map: map,
            icon: {
                path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
                scale: 0.6,
                strokeWeight: 0.2,
                strokeColor: 'black',
                strokeOpacity: 1,
                fillColor: point[4],
                fillOpacity: 0.85,
            },
        }, point[1]);
    };
    map.fitBounds(bounds);
});

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>

Answer 6

Я немного расширил ответ Вокимона , что делает его немного более удобным для изменения других свойств.

function customIcon (opts) {
  return Object.assign({
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
    fillColor: '#34495e',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1,
  }, opts);
}

Использование:

marker.setIcon(customIcon({
  fillColor: '#fff',
  strokeColor: '#000'
}));

Или при определении нового маркера:

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});

Answer 7

начиная с версии 3.11 API карт Google, объект Icon заменяет MarkerImage. Иконка поддерживает те же параметры, что и MarkerImage. Я даже нашел, что это немного более прямолинейно.

Пример может выглядеть так:

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

для получения дополнительной информации проверьте этот сайт

Answer 8

В Internet Explorer , это решение не работает в ssl.

В консоли можно увидеть ошибку:

SEC7111 : безопасность HTTPS скомпрометирована this ,

Обходной путь : как один из предложенных здесь пользователей, замените chart.apis.google.com до chart.googleapis.com для пути URL во избежание ошибки SSL.

Answer 9

Объедините символьный маркер , путь которого рисует контур, с символом «●» для центра.При желании вы можете заменить точку другим текстом («A», «B» и т. Д.).

Эта функция возвращает параметры для маркера с заданным текстом (если есть), цветом текста иЦвет заливки.Он использует цвет текста для контура.

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}

Answer 10

Вы можете использовать этот код, он отлично работает.

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });