设置填充颜色标记Google地图 [英] set fill color marker google map

问题描述

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

How can I use my last column to set the color of the marker?

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

在谷歌搜索和堆栈溢出时，我发现了以下相关主题:

While googling and stackoverflowing, I found this related topic: Google Maps: set custom color for type of markers

但是我要寻找的解决方案必须具有以下属性:

But the solution I am looking for must have these properties:

• 颜色由用户定义(=禁止使用png图像)
• 我要使用默认标记，而不是圆形

请添加一个有效的小提琴.

Please add a working 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: 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
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

这篇关于设置填充颜色标记Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！