vue 集成騰訊地圖實現(xiàn)api(附DEMO)
寫作背景
.之前項目使用騰訊地圖，感覺還是比較好用的，但是官方的demo大部分都是原生js，且比較基礎，并且很多高級Api分布比較分散，不利于開發(fā)者查找，所以使用vue結(jié)合網(wǎng)上的開源框架vue-admin模仿官方，做一個開箱即用的Demo集合出來。 down下項目來會有個登錄界面，隨便輸入六個字符就可以了（筆者很懶，懶得移除了，已經(jīng)沒救了）
項目預覽
各位看官可以從這個地址直接拉取代碼 然后復制粘貼就好了
項目說明
由于筆者時間倉促，目前只整理了四個模塊分別是（如果效果不錯將繼續(xù)更新，歡迎各位道友提issues，看到會及時解決）：
- 基礎地圖引入與展示模塊
- 3D/2D切換 與效果對比
- 關(guān)于位置服務的一些基礎api 依次為：定位當前位置，定位到初始化位置，定位中心點，添加鼠標點擊事件，切換隱藏與顯示地圖文字
- mark標記的基礎使用，依次為：添加標記，結(jié)束添加標記事件，mark標記點可拖拽。
前期準備工作
點擊這條連接注冊騰訊地圖開發(fā)者賬號
注意點
這是一個Vue集成騰訊地圖的demo
項目中需要在index.html上事先引入以下內(nèi)容
<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', '騰訊地圖模板-博客展示')
再次提醒 點擊這條連接可以注冊騰訊地圖開發(fā)者賬號。
書到此地，大部分道友應該直接復制粘貼就可以完美的跑起騰訊地圖了。
以下是2021.1.16月更新
調(diào)用此服務必須擁有開發(fā)者賬號并申請屬于自己的key 這里是申請地址
具體使用方法：
通過get方法調(diào)用 ：
{
rul:'http://localhost:9528/qq/ws/geocoder/v1/?location=lat,lng&key=你的key&get_poi=1'}
位置逆解析有幾處坑在這里陳列一下：
第一大坑 跨域
不知道是不是只有自己這樣，在本地啟動項目時調(diào)用逆解析地址會報跨域問題，需要各位在程序里配置好跨域代碼如下
在vue.config.js里面配置跨域（如果是cli低版本的朋友,麻煩自行網(wǎng)上搜索解決方案，已經(jīng)比較健全了，筆者就不在這里贅述）
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: { // 配置跨域
'/qq': {
target: 'https://apis.map.qq.com/', // 這里后臺的地址模擬的;應該填寫你們真實的后臺接口
ws: true,
changOrigin: true, // 允許跨域
pathRewrite: {
'^/qq': '' // 請求的時候使用這個api就可以
}}
},
第二大坑 授權(quán)報錯
報錯類型如下
{
"status": 110,
"message": "請求來源未被授權(quán), 此次請求來源域名：localhost9528"
}
{
"status": 112,
"message": "IP未被授權(quán)，當前IP：127.0.0.1"
}
{
"status": 111,
"message": "簽名驗證失敗"
}
解決方法均是通過騰訊位置服務平臺，結(jié)合官方文檔配置key管理，如圖
詳細api參數(shù)請參照 官方文檔
到此這篇關(guān)于vue 集成騰訊地圖實現(xiàn)api(附DEMO)的文章就介紹到這了,更多相關(guān)vue 集成騰訊地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript使用遞歸算法求兩個數(shù)字組合功能示例
這篇文章主要介紹了javascript使用遞歸算法求兩個數(shù)字組合功能,結(jié)合實例形式分析了JS基于遞歸算法的數(shù)組遍歷、判斷、轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
最近有項目需求，需要在加入新機構(gòu)的時候，需要選擇它的上級機構(gòu)，下面把代碼整理，分享給大家，需要的朋友可以參考下2015-09-09
這篇文章主要介紹了js實現(xiàn)的二級橫向菜單條,是非常美觀簡潔的二級導航條效果,可實現(xiàn)針對鼠標事件的動態(tài)響應及頁面樣式切換功能,簡單實用,需要的朋友可以參考下2015-08-08
使用JavaScript和HTML實現(xiàn)一個精美的計算器
計算器是我們?nèi)粘Ｉ钪薪?jīng)常使用的工具之一,可以幫助我們進行簡單的數(shù)學運算,在本博文中,我將使用JavaScript編寫一個漂亮的計算器,并添加加減乘除功能,感興趣的同學可以自己動手嘗試一下2023-09-09
這篇文章主要給大家介紹了關(guān)于echarts實現(xiàn)雷達圖的詳細步驟,雷達圖(Radar?Chart)是一種信息豐富的可視化工具,其中多個變量（三個或更多）在二維平面上進行比較,文中給出了完整的代碼示例,需要的朋友可以參考下2024-01-01
JavaScript代碼判斷輸入的字符串是否含有特殊字符和表情代碼實例
這篇文章主要介紹了JavaScript代碼判斷輸入的字符串是否含有特殊字符和表情，通過js代碼if語句進行判斷，并結(jié)合自己開發(fā)的情景，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)分頁點擊控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
js實現(xiàn)無需數(shù)據(jù)庫的縣級以上聯(lián)動行政區(qū)域下拉控件
縣級以上聯(lián)動行政區(qū)域下拉控件，想必大家對此也有所熟悉，本文為大家介紹下使用js實現(xiàn)無需數(shù)據(jù)庫的聯(lián)動下拉控件，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要介紹了JavaScript鼠標懸停事件用法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
javascript實現(xiàn)富文本框選中對齊的思路與代碼
最近在項目中經(jīng)常遇到使用富文本框的情況,下面這篇文章主要給大家介紹了關(guān)于javascript實現(xiàn)富文本框選中對齊的思路與代碼,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03