设置填充颜色标记谷歌地图答案

【问题标题】：set fill color marker google map设置填充颜色标记谷歌地图
【发布时间】：2015-06-01 13:33:37
【问题描述】：

如何使用我的最后一列来设置标记的颜色？

  google.load("visualization", "1", {packages:["map"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Lat', 'Long', 'Name', 'Color'],
      [0.001, 0.002, 'Test 1', '#56df23'],
      [0.003, 0.004, 'Test 2', '#0023f6']
    ]);


    var options = {

        showTip: true,
        useMapTypeControl: true


    };

    var map = new google.visualization.Map(document.getElementById('map_div'));



    map.draw(data, options);
  }

在谷歌搜索和堆栈溢出时，我发现了这个相关主题：Google Maps: set custom color for type of markers

但我正在寻找的解决方案必须具有以下属性：

颜色由用户定义（= 不使用 png 图像）
我想使用默认标记，而不是圆圈

请添加一个工作小提琴。

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

您可以使用Symbols

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

example fiddle

代码 sn-p：

var data = [
  /* ['Lat', 'Long', 'Name', 'Color'], */
  [47.5, -122.0, 'Test 1', '#56df23'],
  [47.6, -122.2, 'Test 2', '#0023f6'],
  [47.7, -122.1, 'Test 2', 'yellow']
];

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

  for (var i = 0; i < data.length; i++) {
    var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(data[i][0], data[i][1]),
      icon: pinSymbol(data[i][3])
    });
  }
}

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

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  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>

【讨论】：

【解决方案2】：

无法更改标准标记针颜色。

你必须建立你自己的使用图标或符号。

如果您不想使用 PNG，您可以使用 SVG，使用 SVG，您可以在没有后端服务器的情况下更改图标的外观。

var marker = new google.maps.Marker({
    map: map,
    icon: 'data:image/svg+xml,<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;" xml:space="preserve"><g><path fill="gree" d="M322.621,42.825C294.073,14.272,259.619,0,219.268,0c-40.353,0-74.803,14.275-103.353,42.825c-28.549,28.549-42.825,63-42.825,103.353c0,20.749,3.14,37.782,9.419,51.106l104.21,220.986c2.856,6.276,7.283,11.225,13.278,14.838c5.996,3.617,12.419,5.428,19.273,5.428c6.852,0,13.278-1.811,19.273-5.428c5.996-3.613,10.513-8.562,13.559-14.838l103.918-220.986c6.282-13.324,9.424-30.358,9.424-51.106C365.449,105.825,351.176,71.378,322.621,42.825zM270.942,197.855c-14.273,14.272-31.497,21.411-51.674,21.411s-37.401-7.139-51.678-21.411c-14.275-14.277-21.414-31.501-21.414-51.678c0-20.175,7.139-37.402,21.414-51.675c14.277-14.275,31.504-21.414,51.678-21.414c20.177,0,37.401,7.139,51.674,21.414c14.274,14.272,21.413,31.5,21.413,51.675C292.355,166.352,285.217,183.575,270.942,197.855z"/></g></svg>',
    position: new google.maps.LatLng(-33.9, 151.2)
});

https://jsfiddle.net/k510L9u2/

使用 SVG，您可以使用比使用符号选项更高级的图形，使用符号您只能创建 SVG 路径。

【讨论】：

【解决方案3】：

您不能更改标记的颜色，您只能更改与标记关联的图标

marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  map: map,
  icon:'youricon.png'
});

【讨论】：