成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Aklman / 3452人閱讀

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

目錄

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

首發(fā)日期：2019-1-25

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



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


先給一下最終的效果。


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


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

代碼大致如下：
  • 上面的代碼中position里面的值是經(jīng)緯度。有了經(jīng)緯度來能夠標(biāo)上點。
  • ak是你申請的百度api的key
  • center是城市中心




如果你希望使用特別的圖標(biāo)來給標(biāo)上全部點，那么也可以使用bm-marker，它里面有一個icon屬性，icon里面的圖片可以用來標(biāo)點：
  • icon中的url是圖片的url路徑。




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

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

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


需求實現(xiàn)步驟：
1.定義一個MyOverLay:


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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1266.html

相關(guān)文章

  • 百度地圖開發(fā)實例番外篇--實用方法（持續(xù)更新）

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

    CocoaChina 評論0 收藏0

  • 第三方庫

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

    seanHai 評論0 收藏0

  • 第三方庫

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

    gityuan 評論0 收藏0

  • vue地圖可視化 ArcGIS篇（3）

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

    oogh 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<