Question

我的目标是改变漂亮的默认谷歌地图标记的颜色。因此，我正在寻找默认（红色）路径/形状。我发现这会变成颜色：

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

所以，通过调用该函数，我想改变颜色（例如icon：pinSymbol（＆＃34;＃666＆＃34;）。但是，我不知道在哪里找到路径？我和＃39;我没有找v2 / plain标记！

New marker

//编辑：我找到了这条路：

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

通过检查地图代码的运行情况，我发现在Google Maps JS API V3中，标记的默认网址为https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png，标记本身为22x40 PNG文件。要重新着色它，您可能必须使用CSS过滤器/ JS等，或者在光栅图形编辑器中手动重新调整它。

Answer 2

使用您在问题中提供的路径：

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"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="content_window"></div>

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

Google使用其他颜色映射v3默认标记路径

3 个答案: