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

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

Вы можете динамически запрашивать изображения значков из API карт Google с помощью 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, вам нужно соответственно установить размер и опорные точки:

    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» на код цвета, который вам нужен. Например:

Благодарю Джека Б. Нимбла за вдохновение;)

Если вы используете 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)

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

Помимо нескольких ограниченных предопределенных символов, вы можете создать любую форму любого цвета, указав строку пути 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"),
});

Если вы сохраняете ключевую точку формы равной 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'.

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

Пуля в середине не такая большая, как по умолчанию. Класс 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)
  )
});

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

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

Привет, вы можете использовать значок как 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>

начиная с версии 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)
};

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

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

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

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

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

Как уже упоминали другие, ответ vokimon отличный, но, к сожалению, Google Maps работает немного медленнее, когда есть много маркеров на основе SymbolPath / SVG одновременно.

Похоже, что использование Data URI намного быстрее, примерно на уровне PNG.

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

Вот модифицированная версия, которая генерирует эти маркеры:

var coloredMarkerDef = {
    svg: [
        '<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
            '<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
            '<circle cx="11" cy="11" r="3"/>',
        '</svg>'
    ].join(''),
    anchor: {x: 11, y: 41},
    size: {width: 22, height: 41}
};

var getColoredMarkerSvg = function(color) {
    return coloredMarkerDef.svg.replace('{fillColor}', color);
};

var getColoredMarkerUri = function(color) {
    return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};

var getColoredMarkerIcon = function(color) {
    return {
        url: getColoredMarkerUri(color),
        anchor: coloredMarkerDef.anchor,
        size: coloredMarkerDef.size,
        scaledSize: coloredMarkerDef.size
    }
};

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

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

Недостатком, очень похожим на изображение PNG, является то, что весь прямоугольник кликабелен. В теории не так уж сложно отследить путь SVG и сгенерировать многоугольник MarkerShape .

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

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

Объедините символьный маркер, путь которого рисует контур, с символом «●» для центра. Вы можете заменить точку другим текстом («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
        }
    };
}

Я пытаюсь создать пользовательский маркер карты Google двумя способами. Этот код запуска, используемый canvg.js, является лучшей совместимостью для браузера. Код закомментированного кода не поддерживает IE11 срочно.

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener('click', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: 'poly'
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
    '</svg>'
  );
  div.append(svg);

  var dd = $("<canvas height='50px' width='50px'></cancas>");

  var svgHtml = div[0].innerHTML;

  //todo yao gai bu dui
  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
  //    + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
  //    + '</svg>';
  //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>

Я долго пытался улучшить нарисованный маркер Вокимона и сделать его более похожим на Google Maps (и в значительной степени преуспел). Вот код, который я получил:

let circle=true;

path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+   
'A 16,16 0 0,1 -11,-29 '+  
'A 11,11 0 1,1 11,-29 '+  
'A 16,16 0 0,1 5.5,-18.5 '+  
'C 3,-14 0.7,-9 0,0 z '+  
['', 'M -2,-28 '+  
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];   

Я также масштабировал его на 0,8.

измените его на chart.googleapis.com для пути, иначе SSL не будет работать

Используя swift и Google Maps Api v3, это был самый простой способ сделать это:

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

надеюсь, это поможет кому-то.

Это пользовательские круглые маркеры

small_red:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

small_yellow:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

Small_green:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

small_blue:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==

Это изображения размером 9x9 png.

Как только они появятся на вашей странице, вы можете просто перетащить их, и вы получите настоящий файл png.

Вы также можете использовать цветовой код.

 const marker: Marker = this.map.addMarkerSync({
    icon: '#008000',
    animation: 'DROP',
    position: {lat: 39.0492127, lng: -111.1435662},
    map: this.map,
 });

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

Я знаю, что этот вопрос старый, но если кто-то просто захочет изменить цвет булавки или маркера, ознакомьтесь с документацией: https://developers.google.com/maps/documentation/android-sdk/marker.

когда вы добавляете маркер, просто установите свойство icon:

GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
    .position(latLng)
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

Есть 10 цветов по умолчанию на выбор . Если этого недостаточно (простое решение), то я бы, вероятно, пошел на более сложное, приведенное в других ответах, удовлетворяя более сложную потребность.

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