Vue 集成騰訊地圖基礎api Demo集合
寫作背景
.之前專案使用騰訊地圖，感徑訓是比較好用的，但是官方的demo大部分都是原生js，且比較基礎，并且很多高級Api分布比較分散，不利于開發者查找，所以使用vue結合網上的開源框架vue-admin模仿官方，做一個開箱即用的Demo集合出來， down下專案來會有個登錄界面，隨便輸入六個字符就可以了（筆者很懶，懶得移除了，已經沒救了）
專案預覽
各位看官可以從這個地址直接拉取代碼 然后復制粘貼就好了
專案說明
由于筆者時間倉促，目前只整理了四個模塊分別是（如果效果不錯將繼續更新，歡迎各位道友提issues，看到會及時解決）：
- 基礎地圖引入與展示模塊
- 3D/2D切換 與效果對比
- 關于位置服務的一些基礎api 依次為：定位當前位置，定位到初始化位置，定位中心點，添加滑鼠點擊事件，切換隱藏與顯示地圖文字
- mark標記的基礎使用，依次為：添加標記，結束添加標記事件，mark標記點可拖拽，
前期準備作業
點擊這條連接注冊騰訊地圖開發者賬號
注意點
這是一個Vue集成騰訊地圖的demo
專案中需要在index.html上事先引入以下內容
<script src="https://map.qq.com/api/gljs?v=1.exp&key=你注冊之后獲取的key值"></script>
<script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=你注冊之后獲取的key值"></script>
然后在main.js 檔案下寫入這幾行代碼
Vue.prototype.$Map = window.TMap
Vue.prototype.$Location = new window.qq.maps.Geolocation('你自己的key', '騰訊地圖模板-博客展示')
再次提醒 點擊這條連接可以注冊騰訊地圖開發者賬號，
書到此地，大部分道友應該直接復制粘貼就可以完美的跑起騰訊地圖了，
題外話
筆者致力于開發遇到的各種復雜組件，雖說授人以魚不如授人以漁，但是很多情況下我們是需要先恰飯的，所以先把魚釣上來，希望幫各位剛上路的道友填飽肚子
以下是我所有組件開源的地址與博客 各位如果覺得有用，別忘了點贊與star，感謝支持
前端組件集合文章
vue組件-echarts地圖顯示柱狀圖并添加點擊事件檔案
vue組件之仿釘釘自定義流程圖組件檔案
vue組件之樹狀選擇器組件檔案
最后給我的老東家打個廣告，金現代企業股份有限公司做的專案真的不錯，在里面帶的一年里，成長很多，尤其在那里接觸到了UML統一建模語言，對專業技能提升真的很大，在此感恩，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/248617.html
標籤：其他
上一篇：Git合并分支的流程步驟
下一篇：HTML5知識點總結（五）