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

Question

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

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

在谷歌搜索和 stackoverflowing 时，我发现了这个相关主题：Google Maps: set custom color for type ofMarkers

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

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

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

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
}