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

【问题标题】：Applying dynamic CSS style to marker of google map将动态 CSS 样式应用于谷歌地图的标记
【发布时间】：2016-08-09 16:45:31
【问题描述】：

我知道我们可以动态地将 label 或 icon image 或 css class 应用于 angularJs 中的 google 标记，但我无法找出我们如何将动态 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);
    }

【问题讨论】：

你为什么不尝试为你的图标赋予风格？您还可以使用 MarkerImage 类来调整大小等。
如何为我的图标赋予风格？任何解决方案.. 什么是 markerImage 类？

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

【解决方案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
});

就是这样。

【讨论】：

【解决方案2】：

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

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

创建标记时，您可以在 MarkerOptions 对象中指定标签属性。或者，您可以在 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。

【讨论】：