怎么用vue集成騰訊地圖實現(xiàn)api

這篇“怎么用vue集成騰訊地圖實現(xiàn)api”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么用vue集成騰訊地圖實現(xiàn)api”文章吧。

項目說明

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

• 基礎(chǔ)地圖引入與展示模塊

• 3D/2D切換 與效果對比

• 關(guān)于位置服務(wù)的一些基礎(chǔ)api 依次為：定位當(dāng)前位置，定位到初始化位置，定位中心點，添加鼠標(biāo)點擊事件，切換隱藏與顯示地圖文字

• mark標(biāo)記的基礎(chǔ)使用，依次為：添加標(biāo)記，結(jié)束添加標(biāo)記事件，mark標(biāo)記點可拖拽。

前期準(zhǔn)備工作

點擊這條連接注冊騰訊地圖開發(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ā)者賬號。

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

以下是2021.1.16月更新

調(diào)用此服務(wù)必須擁有開發(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/", // 這里后臺的地址模擬的;應(yīng)該填寫你們真實的后臺接口
        ws: true,
        changOrigin: true, // 允許跨域
        pathRewrite: {
          "^/qq": "" // 請求的時候使用這個api就可以
        }}
    },

第二大坑 授權(quán)報錯
報錯類型如下

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

 	{
    "status": 112,
    "message": "IP未被授權(quán)，當(dāng)前IP：127.0.0.1"
	}

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

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

以上就是關(guān)于“怎么用vue集成騰訊地圖實現(xiàn)api”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。