此文重點(diǎn)是在地圖上標(biāo)點(diǎn)，所以就省去引入百度地圖的步驟了。

先給一下最終的效果。

這個(gè)效果主要是利用百度地圖的“覆蓋物”來(lái)實(shí)現(xiàn)的。

由于我做的這個(gè)要求顯示不同的顏色來(lái)代表不同的所屬者，所以就做的麻煩一點(diǎn)。

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

代碼大致如下：

• 上面的代碼中position里面的值是經(jīng)緯度。有了經(jīng)緯度來(lái)能夠標(biāo)上點(diǎn)。
• ak是你申請(qǐng)的百度api的key
• center是城市中心

如果你希望使用特別的圖標(biāo)來(lái)給標(biāo)上全部點(diǎn)，那么也可以使用bm-marker，它里面有一個(gè)icon屬性，icon里面的圖片可以用來(lái)標(biāo)點(diǎn)：

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

如果你想要顯示多種覆蓋物，那么你可以使用overlay。(要封裝，因?yàn)榉庋b之后才能傳值進(jìn)去指定顯示什么覆蓋物)

簡(jiǎn)單的overlay是這樣子的：

為什么可以基于這個(gè)組件來(lái)封裝是因?yàn)檫@個(gè)組件有以下幾個(gè)好處：

可以定制文本內(nèi)容

它本身是一個(gè)元素，而不是一個(gè)圖片，(上面的“打點(diǎn)物”都是圖片(小紅點(diǎn)不確定是不是，可能是一個(gè)字體圖標(biāo)的東西))，因?yàn)槭窃?#xff0c;所以我們能夠使用border,background，color等等樣式來(lái)處理這個(gè)元素。

需求實(shí)現(xiàn)步驟：

1.定義一個(gè)MyOverLay:

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

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

---

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。