Vue：如何在地圖上添加自定義覆蓋物（點）

Aklman 發布于2019-04-23 11:52 / 3449人閱讀

摘要：目錄如何在地圖上添加自定義覆蓋物點首發日期如何在地圖上添加自定義覆蓋物點如何在地圖上添加自定義覆蓋物點此文重點是在地圖上標點，所以就省去引入百度地圖的步驟了。這個效果主要是利用百度地圖的覆蓋物來實現的。

如何在地圖上添加自定義覆蓋物（點）

首發日期：2019-1-25

如何在地圖上添加自定義覆蓋物（點）

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

先給一下最終的效果。

這個效果主要是利用百度地圖的“覆蓋物”來實現的。
由于我做的這個要求顯示不同的顏色來代表不同的所屬者，所以就做的麻煩一點。

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

代碼大致如下：

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

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

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

如果你想要顯示多種覆蓋物，那么你可以使用overlay。（要封裝，因為封裝之后才能傳值進去指定顯示什么覆蓋物）
簡單的overlay是這樣子的：

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

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

需求實現步驟：
1.定義一個MyOverLay:

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

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

GPU云服務器云服務器自定義地圖 php添加自定義菜單自定義上拉下拉在php自定義函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1266.html

百度地圖開發實例番外篇--實用方法（持續更新）

摘要：一前言在使用百度地圖開發的過程中，查閱百度地圖官網基本上就能滿足開發的需求，但是有時候需要設置一些東西，很難在官網上查閱到相關的方法技巧。希望百度地圖能夠越來越強大，這樣開發者就可以愉快的開發了一前言在使用百度地圖開發的過程中，查閱百度地圖官網demo基本上就能滿足開發的需求，但是有時候需要設置一些東西，很難在官網上查閱到相關的方法技巧。筆者特意把開發過程中遇到的一些疑難雜癥和解...

CocoaChina 2019-08-22 13:53 評論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

seanHai 2019-08-22 13:58 評論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

gityuan 2019-08-29 14:17 評論0 收藏0
vue地圖可視化 ArcGIS篇（3）

摘要：不建議底圖選擇中存在兩種不同坐標體系，如下圖坐標存在明顯的偏差，火星坐標在采用坐標系的地圖上位置偏上彩色中國天地圖全球衛星地圖例如我們使用的類進行查找，返回的數據都是國際坐標，因此必須進行偏差糾正。 ArcGIS for javascript開發心得本次實例中采用ArcGIS for javascript3.24版本，由于版本3與4在API等存在較大區別，就不一一列舉，詳細區別看官方...

oogh 2019-08-23 12:38 評論0 收藏0