Javascript 将CSS样式的标记添加到google地图

有人能告诉我如何才能添加到下面的谷歌地图API

下面是标准的GoogleMapsAPI代码，带有为标记（图标）提供图像源的选项

用途-用途：

curMarker = new RichMarker({
    position: new google.maps.LatLng(position),
    map: map,
    content: '<div id="foo">Bar</div>'
});

curMarker=new RichMarker({
位置：新google.maps.LatLng（位置），
地图：地图，
内容：“酒吧”
});

---

这是你提到的我正在使用的脉冲动画师的一个修改版本。基本上创建一个覆盖（），然后通过附着到标记点来定位该覆盖

要使用CSS创建pin和动画，我相信如果您希望可以通过标记单击pin图像，您需要将pin图像设置为空白，并使用类似的设置将其设置为正确的大小

var image = {
  url: '/images/blank.png',
  size: new google.maps.Size(100, 39),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(50, 39),
  };

然后确保覆盖图绘制在正确的窗格上

var pane = this.getPanes().overlayImage; (contains the marker foreground images.)

我在下面提供的实现略有不同，因为我决定使用pin图像，而只使用动画部分。我将在叠加阴影上绘制，以便动画位于我用于标记的图像后面

var image = {
  url: '/images/blank.png',
  size: new google.maps.Size(100, 39),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(50, 39),
  };

JS

curMarker=new RichMarker({
立场：反对，
地图：地图，
内容：“”，
});

我在Angular2 Ionic3项目中使用了RichMarker

let marker = new RichMarker({
  position: new google.maps.LatLng(markerData.lat, markerData.lng),
  map: this.map,
  content: '<div class="richmarker-wrapper"><center><img class="marker-image" src="' + image +'"></img><p class="marker-nickname">' + markerData.story.user.nickName + '</p></center></div>',
  shadow: 0
}); 

let marker=new RichMarker({
位置：新google.maps.LatLng（markerData.lat，markerData.lng），
map:this.map，
内容：“
”+markerData.story.user.昵称+”
，
阴影：0
}); 

诀窍是如何导入js文件。在src目录中，我将js文件添加到index.html中，如下所示：

<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=MyApiKEY"></script>
<script async defer src="assets/js/richmarker.js"></script>

我非常确定您需要在icon参数中添加一个图像，但是该pin完全是用CSS绘制的。您可以向图像添加动画，但不确定是否可以完全绘制。另一种选择是使用谷歌地图标记对象[link]，或者这里有一个好的开始[link]。不清楚您的问题是将标记CSS设置为样式，还是希望在将其添加到地图时设置动画。如果是后者，则可以在创建标记时在标记的选项中指定

动画：google.maps.animation.DROP

属性。看到我的问题是在谷歌地图上显示css样式的标记（带有脉冲动画）。我刚刚发现有人已经在下面的链接中实现了css样式的标记（滚动到页面底部以查看该标记是否工作）。试图弄清楚这是如何实现的。我如何将其添加到angular 2项目中？我在第37行RichMarker.prototype=new google.maps.overlyview（）上出错；窗口['RichMarker']=RichMarker；richmarker.js:37未捕获引用错误：在richmarker.js中未定义google:37@Wasyster也许您需要添加“richmarker.js”库。你在这里找到

curMarker = new RichMarker({
    position: pointToMoveTo,
    map: map,
    content: '<div class="pin2 bounce2"></div><div class="pulse2"></div>',
});

let marker = new RichMarker({
  position: new google.maps.LatLng(markerData.lat, markerData.lng),
  map: this.map,
  content: '<div class="richmarker-wrapper"><center><img class="marker-image" src="' + image +'"></img><p class="marker-nickname">' + markerData.story.user.nickName + '</p></center></div>',
  shadow: 0
}); 

<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=MyApiKEY"></script>
<script async defer src="assets/js/richmarker.js"></script>