Question

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

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

Answer 1

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

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

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

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

Answer 2

使用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,
    }
}

如何更改google map api draggable marker的颜色？

2 个答案: