带有其他颜色的谷歌地图v3默认标记路径

Question

我的目标是更改漂亮的默认google地图标记的颜色。因此，我正在寻找默认(红色)的路径/形状。我发现下面这段代码会变成颜色：

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

因此，通过调用该函数，我想要更改颜色(例如，图标: pinSymbol("#666")。但是，我不知道在哪里可以找到这条路？我不是在找v2 / plain标记！

​

​

// edit:我找到了这个路径：

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 Maps API 3 - Custom marker color for default (dot) marker)

如何生成平滑的梯度？

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

proof of concept fiddle

​

​

代码片段：

​

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>

​

Answer 2

通过检查地图的实际代码，我发现在Google Maps JS API V3中，标记的默认URL是https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png，并且标记本身是一个22x40PNG文件。要对其重新着色，您可能需要使用CSS滤镜/JS等，或者在光栅图形编辑器中手动重新着色。

​

​

Answer 3

我认为你可以通过这样做来改变图标marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

或者您可以参考customize marker image documentation。

此外，您还可以使用predefined symbols作为您的路径。示例代码：

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