单击更改 Google 地图标记符号颜色

Question

我正在为我的地图标记使用自定义 SVG 符号：https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom

我似乎找不到任何关于如何更改任何这些 SVG 选项以在单击时创建 'activated' 标记的文档。我想更改自定义符号的颜色或比例。

我能找到的最接近的例子是：

marker.setIcon("_URL-GOES-HERE_");

但是，这是特定于自定义图标图像的，而不是自定义符号。这可能吗？

Answer 1

您可以通过在单击图标时创建具有新颜色的图标版本来更改单击时的颜色：

marker.addListener('click', changeColor);

function changeColor(evt) {
  this.setIcon(pinSymbol('blue'));
}

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: 2,
        scale: 1
    };
}

proof of concept fiddle

代码片段：

var markers = [];

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 = createMarker(latlng, 'red', map);
  var marker1 = createMarker(new google.maps.LatLng(47.5, -122.0), 'green', map);
  var marker2 = createMarker(new google.maps.LatLng(47.6, -122.2), 'orange', map);
  var marker3 = createMarker(new google.maps.LatLng(47.7, -122.1), 'yellow', map);
}

function createMarker(position, color, map) {
  var marker = new google.maps.Marker({
    map: map,
    position: position,
    icon: pinSymbol(color),
    originalColor: color
  });
  marker.addListener('click', changeColor);
  markers.push(marker);
  return marker;
}

function changeColor(evt) {
  restoreColors();
  this.setIcon(pinSymbol('blue'));
}

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: 2,
    scale: 1
  };
}

function restoreColors() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setIcon(pinSymbol(markers[i].originalColor));
  }
}
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"></div>

单击更改 Google 地图标记符号颜色

Change Google Map marker symbol color on click

svg

google-maps

google-maps-markers