谷歌用其他颜色映射 v3 默认标记路径

Posted 2023-02-23

【中文标题】谷歌用其他颜色映射 v3 默认标记路径

【英文标题】：Google maps v3 default marker path with other colors

【发布时间】：2015-02-13 19:41:27

【问题描述】：

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

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

所以，通过调用该函数，我想更改颜色（例如图标：pinSymbol("#666")。但是，我不知道在哪里可以找到路径？我不是在寻找 v2 / 普通标记！

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

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）

如何生成平滑渐变？

【问题讨论】：

看来你不能...遇到同样的问题，所以我不得不妥协并使用丑陋的标记

【参考方案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

代码 sn-p：

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>

【讨论】：

重要虽然这很好用，但图标路径的使用对 Google API 要求很高，并且会使标记的呈现速度变得很慢。

【参考方案2】：

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

【参考方案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
);

【讨论】：

他大概知道自己可以，特意要了默认标记的路径。