Google отображает путь маркера по умолчанию v3 с другими цветами

Моя цель - изменить цвет красивого маркера Google Maps по умолчанию. Поэтому ищу путь/форму дефолтного (красного). Я обнаружил, что это меняется на цвет:

function pinSymbol(color) {
    return {
        path: '???' 
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}

Итак, вызвав функцию, я хотел бы изменить цвет (например, значок: pinSymbol("#666"). Однако я не знаю, где найти путь? Я не ищу маркер v2/plain !

Новый маркер

// редактировать: я нашел этот путь:

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',

(из ответа на вопрос: Карты Google API 3 — Пользовательский цвет маркера для стандартного (точечного) маркера)

Как создать плавный градиент?


google-maps colors google-maps-api-3 google-maps-markers
person wiesson    schedule 15.12.2014    source источник
comment
Похоже, вы просто не можете... Была такая же проблема, поэтому мне пришлось пойти на компромисс и использовать уродливый маркер.   -  person Heyfara    schedule 22.11.2018

Ответы (3)


arrow_upward
3
arrow_downward

Используя путь, который вы указали в своем вопросе:

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',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 1,
        scale: 1
    };
}

доказательство концепции скрипки

скриншот полученной карты

фрагмент кода:

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',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 1,
    scale: 1
  };
}
function initialize() {
  var latlng = new google.maps.LatLng(47.605, -122.333);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    icon: pinSymbol('red')
  });

  var marker1 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.5, -122.0),
    icon: pinSymbol('green')
  });
  var marker2 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.6, -122.2),
    icon: pinSymbol('orange')
  });
  var marker3 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.7, -122.1),
    icon: pinSymbol('yellow')
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="content_window"></div>

person geocodezip    schedule 23.10.2018
comment
Важно Хотя это работает хорошо, использование путей для значков довольно требовательно к Google API и делает отрисовку маркеров довольно медленной. - person Pizzicato; 26.11.2020

arrow_upward
2
arrow_downward

Изучив код Карт в действии, я обнаружил, что в Google Maps JS API V3 URL-адрес маркера по умолчанию — https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png , а сам маркер представляет собой файл PNG размером 22x40. . Чтобы перекрасить его, вам, вероятно, придется использовать фильтры CSS/JS и т. Д. Или вручную перекрасить его в редакторе растровой графики.

маркер карты PNG

person Community    schedule 18.11.2017

arrow_upward
0
arrow_downward

Я думаю, вы можете изменить значок, сделав это marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Или вы можете обратиться к документации по настройке изображения маркера.

Кроме того, вы можете использовать для своего пути предопределенные символы. Образец кода:

var marker = new google.maps.Marker({
    id: "some-id",
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        strokeColor: "red",
        scale: 3
    },
    map: map,
    title: "some-title",
    position: myLatlng
});
person ztan    schedule 15.12.2014
comment
Вероятно, он знает, что может, и специально запрашивает путь маркера по умолчанию. - person Jonathan Weber; 17.06.2016