javascript - 谷歌地图 : How to make custom markes like Airbnb?

Question

我想制作一张带有自定义标记的 map ，例如 Airbnb:

即带有价格数字和方形外观的标记。代码是这样的:

<div class="map-marker" style="position: absolute; overflow: hidden; opacity: 0.01; margin-left: 0px; margin-top: 0px; left: 267px; top: 237px; z-index: 238; display: block; cursor: pointer;" onselectstart="return false;" ondragstart="return false;" title="">
  <div class="tooltip tooltip-bottom-middle tooltip-layout tooltip-primary">
    <div class="price-marker__label">
      <div class="price-label">
        <sup class="currency-prefix">$</sup>
        <span class="price-amount">108</span>
      </div>
    </div>
  </div>
</div>

我以为这会很容易。定义一个自定义的 html 标记组件，将它连同其坐标传递给 google map ，它就会在那里。

但它似乎比这更复杂。

我找到了 Custom Google Map Marker like in Trulia map .这与我的问题非常相似。但是 MarkwithLable 现在不可用。

我在 Google API 文档中可以找到的是 https://developers.google.com/maps/documentation/javascript/examples/marker-labels .这只是一个带有标签的简单标记。而且我没有看到任何自定义 HTML 组件传入。

---

更新:

我认为 RichMarker( https://github.com/googlemaps/js-rich-marker )，也许我正在寻找什么？

Answer 1

您可以设置自定义标记类型，然后根据需要分配它们....

您是否完成了/this/？

https://developers.google.com/maps/documentation/javascript/tutorials/custom-markers