如何更改谷歌地图 api 可拖动标记的颜色？答案

【问题标题】：How to change the color of google map api draggable markers?如何更改谷歌地图 api 可拖动标记的颜色？
【发布时间】：2016-12-01 01:52:47
【问题描述】：

我想要实现的是，当我创建一个新标记时，它应该有不同的颜色。这是我的 $scope 。

$scope.addRoute = function() {
     console.log('addRoute');
  var marker2 = new google.maps.Marker(
    {
      position: {lat: 52.02, lng: 10.56},
      visible:true,
      icon:'',
      map: map,
      draggable: true
    });      

        directionsDisplay.setMap(map);
 };

【问题讨论】：

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

【解决方案1】：

使用Symbols

在您现有的 $scope.addRoute 函数中而不是 icon:'' 中使用 generateIcon()。

    var marker = new google.maps.Marker({
        position : {
            lat : 52.02,
            lng : 10.56
        },
        visible : true,
        icon : generateIcon(),
        map : map,
        draggable : true

    });

您需要在控制器中添加此功能。

function generateIcon() {
    //http://map-icons.com/ for svg path
    return {

        path : 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',
        scale : 0.5,
        fillColor : '#' + (Math.random() * 0xFFFFFF << 0).toString(16),
        fillOpacity : 100,
    }
}

【讨论】：

如何将它添加到我令人兴奋的范围内
问题是@Searching 这个范围在控制器中，从事此工作的人没有使用指令
@Frank，你能试试这个小提琴jsfiddle.net/maxcache/4f8qzvyz吗？这是一个简单的设置。它只是根据您在问题中想要的添加随机颜色的标记..
工作中请点赞。最后一个问题如何改变颜色的不透明度，就像我读到的绿色鲜艳的颜色
@Frrank 尝试使用 0 到 100 之间的 fillOpacity 选项。检查文档...您可能会找到有关您可以使用的选项的更多信息。

【解决方案2】：

您可以使用所需颜色的图标：

var marker2 = new google.maps.Marker(
{
  position: {lat: 52.02, lng: 10.56},
  visible:true,
  icon:'',
  map: map,
  draggable: true
}); 

marker2.setIcon('https://maps.google.com/mapfiles/ms/icons/blue-dot.png');

var marker3 = new google.maps.Marker(
{
  position: {lat: 62.02, lng: 12.56},
  visible:true,
  icon:'',
  map: map,
  draggable: true
}); 

marker3.setIcon('https://maps.google.com/mapfiles/ms/icons/red-dot.png')

或者您可以直接从 URL 更改颜色：

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

【讨论】：

这个解决方案会影响性能，假设你需要 100 个不同的图标，你不会依赖于像这样添加它们，顺便说一下 2 个标记，这是最好的