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

Ответ 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, вам необходимо установить размер и опорные точки соответственно:

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

Кредит из-за Jack B Nimble для вдохновения;)

Ответ 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)

Ответ 3

Вот отличное решение с использованием самого 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'.

Ответ 4

Ну, самое близкое, что мне удалось получить с помощью StyledMarker, - this.

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

В примере используйте "% 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});

Вам нужно будет modifiy 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)
  )
});

Ответ 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>

Ответ 6

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

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

Ответ 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)
};

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

Ответ 8

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

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

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

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

Ответ 9

Как уже упоминалось, ответ 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.

Ответ 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
        });

Ответ 11

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

Ответ 12

Я пробую два способа создания пользовательского маркера карты 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>

Ответ 13

Я долго пытался улучшить маркер нарисованного вокимона и сделать его более похожим на маркер 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.

Ответ 14

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

Ответ 15

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

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

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

Ответ 16

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

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.

Ответ 17

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

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