Question

我知道我们可以动态地将标签或图标图片或 css类应用于angularJs中的谷歌标记，但我无法挖掘我们如何将动态CSS样式应用于标记。我必须在谷歌地图上动态生成标记并动态着色。我们能做到吗？

我试过以下但似乎没有工作

  var putMarker = function(lat,long,color) {              
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,long),
        map: map,
        labelStyle: {backgroundColor:"#ff00ff", height:"5px", width:"5px", borderRadius:"50px"},
        icon: 'img/mapView.png',
        label: (markers.length + 1) + '',
        animation: google.maps.Animation.DROP,
        isDraggable: false
      });

      markers.push(marker);

      //extend the bounds to include each marker's position
      bounds.extend(marker.position);

      //now fit the map to the newly inclusive bounds
      map.fitBounds(bounds);
    }

Answer 1

标记MarkerImage，可以使用Icon类。

var customSizeImage = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

var marker = new google.maps.Marker({
   position: {lat: lat, lng: lng},
   map: map,
   icon: customSizeImage
});

多数人。

Answer 2

如果要在标记上显示单个文本字符，可以使用标记标签。如果需要更多自定义，可以定义要显示的图标而不是默认标记图像。定义图标涉及设置许多确定标记视觉行为的属性。

marker label是出现在标记内的单个文字字符。您可以将标记标签指定为字符串或包含字符串和其他标签属性的MarkerLabel对象。在这两种情况下，只有指定字符串的第一个字符显示在标记上。

创建标记时，可以在MarkerOptions对象中指定label属性。或者，您可以在Marker对象上调用setLabel（）以在现有标记上设置标签。

以下是一些示例代码：

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151}
});

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map: map,
icon: image
});
}

有关详细信息，请查看此page。

将动态CSS样式应用于谷歌地图的标记

2 个答案: