此文重點是在地圖上標點，所以就省去引入百度地圖的步驟了。

先給一下最終的效果。

這個效果主要是利用百度地圖的“覆蓋物”來實現的。

由于我做的這個要求顯示不同的顏色來代表不同的所屬者，所以就做的麻煩一點。

如果你的需求不要求特別顯示，那么可以使用bm-marker

代碼大致如下：

• 上面的代碼中position里面的值是經緯度。有了經緯度來能夠標上點。
• ak是你申請的百度api的key
• center是城市中心

如果你希望使用特別的圖標來給標上全部點，那么也可以使用bm-marker，它里面有一個icon屬性，icon里面的圖片可以用來標點：

• icon中的url是圖片的url路徑。

如果你想要顯示多種覆蓋物，那么你可以使用overlay。(要封裝，因為封裝之后才能傳值進去指定顯示什么覆蓋物)

簡單的overlay是這樣子的：

為什么可以基于這個組件來封裝是因為這個組件有以下幾個好處：

可以定制文本內容

它本身是一個元素，而不是一個圖片，(上面的“打點物”都是圖片(小紅點不確定是不是，可能是一個字體圖標的東西))，因為是元素，所以我們能夠使用border,background，color等等樣式來處理這個元素。

需求實現步驟：

1.定義一個MyOverLay:

2.使用MyOverLay,傳給它需要的值：

my-overlay v-for="item in 省略" :key="item.省略" :position="{lng: item.longitude, lat: item.latitude}" :text="item.省略" :color='省略(這里可以處理一下從而給每一個組件實例都傳入自定義的值)' >

---

想了解更多，可以查看Vue百度地圖api的官網：https://dafrok.github.io/vue-baidu-map/#/

總結

以上是生活随笔為你收集整理的高德地图自定义点标记大小_Vue：如何在地图上添加自定义覆盖物（点）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。