vue 集成騰訊地圖實(shí)現api(附DEMO)

目錄

寫(xiě)作背景

.之前項目使用騰訊地圖，感覺(jué)還是比較好用的，但是官方的demo大部分都是原生js，且比較基礎，并且很多高級Api分布比較分散，不利于開(kāi)發(fā)者查找，所以使用vue結合網(wǎng)上的開(kāi)源框架vue-admin模仿官方，做一個(gè)開(kāi)箱即用的Demo集合出來(lái)。 down下項目來(lái)會(huì )有個(gè)登錄界面，隨便輸入六個(gè)字符就可以了（筆者很懶，懶得移除了，已經(jīng)沒(méi)救了）

項目預覽

各位看官可以從這個(gè)地址直接拉取代碼 然后復制粘貼就好了

項目說(shuō)明

由于筆者時(shí)間倉促，目前只整理了四個(gè)模塊分別是（如果效果不錯將繼續更新，歡迎各位道友提issues，看到會(huì )及時(shí)解決）：

• 基礎地圖引入與展示模塊
• 3D/2D切換 與效果對比
• 關(guān)于位置服務(wù)的一些基礎api 依次為：定位當前位置，定位到初始化位置，定位中心點(diǎn)，添加鼠標點(diǎn)擊事件，切換隱藏與顯示地圖文字
• mark標記的基礎使用，依次為：添加標記，結束添加標記事件，mark標記點(diǎn)可拖拽。

前期準備工作

點(diǎn)擊注冊騰訊地圖開(kāi)發(fā)者賬號

注意點(diǎn)

這是一個(gè)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 文件下寫(xiě)入這幾行代碼

Vue.prototype.$Map = window.TMap
Vue.prototype.$Location = new window.qq.maps.Geolocation('你自己的key', '騰訊地圖模板-博客展示')

再次提醒 點(diǎn)擊可以注冊騰訊地圖開(kāi)發(fā)者賬號。

書(shū)到此地，大部分道友應該直接復制粘貼就可以完美的跑起騰訊地圖了。

以下是2021.1.16月更新

調用此服務(wù)必須擁有開(kāi)發(fā)者賬號并申請屬于自己的key
具體使用方法：
通過(guò)get方法調用 ：

{
rul:'http://localhost:9528/qq/ws/geocoder/v1/?location=lat,lng&key=你的key&get_poi=1'}

位置逆解析有幾處坑在這里陳列一下：

第一大坑 跨域
不知道是不是只有自己這樣，在本地啟動(dòng)項目時(shí)調用逆解析地址會(huì )報跨域問(wèn)題，需要各位在程序里配置好跨域代碼如下
在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/', // 這里后臺的地址模擬的;應該填寫(xiě)你們真實(shí)的后臺接口
        ws: true,
        changOrigin: true, // 允許跨域
        pathRewrite: {
          '^/qq': '' // 請求的時(shí)候使用這個(gè)api就可以
        }}
    },

第二大坑 授權報錯
報錯類(lèi)型如下

 	{
    "status": 110,
    "message": "請求來(lái)源未被授權, 此次請求來(lái)源域名：localhost9528"
	}

 	{
    "status": 112,
    "message": "IP未被授權，當前IP：127.0.0.1"
	}

 {
    "status": 111,
    "message": "簽名驗證失敗"
  }

解決方法均是通過(guò)騰訊位置服務(wù)平臺，結合官方文檔配置key管理，如圖

詳細api參數請參照

到此這篇關(guān)于vue 集成騰訊地圖實(shí)現api(附DEMO)的文章就介紹到這了,更多相關(guān)vue 集成騰訊地圖內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！