vue 集成騰訊地圖基礎(chǔ)api Demo集合(基礎(chǔ)地圖引入與展示模塊,地址逆解析，3D/2D切換 刹前，位置服務(wù)为鳄，mark標(biāo)記)
寫作背景
官方網(wǎng)站的demo大部分都是原生js净宵，較基礎(chǔ)孟害，很多高級Api分布比較分散拒炎，為了有利于開發(fā)者查找，使用vue結(jié)合網(wǎng)上的開源框架vue-admin參照官方網(wǎng)站demo挨务，做一個(gè)開箱即用的Demo集合出來击你。（ down下項(xiàng)目來會(huì)有個(gè)登錄界面，隨便輸入六個(gè)字符就可以了）
項(xiàng)目預(yù)覽
項(xiàng)目說明
由于筆者時(shí)間倉促，目前只整理了四個(gè)模塊分別是（如果效果不錯(cuò)將繼續(xù)更新球切，歡迎各位道友提issues谷誓，看到會(huì)及時(shí)解決）：
- 基礎(chǔ)地圖引入與展示模塊
- 3D/2D切換 與效果對比
- 關(guān)于位置服務(wù)的一些基礎(chǔ)api 依次為：定位當(dāng)前位置，定位到初始化位置吨凑，定位中心點(diǎn)捍歪，添加鼠標(biāo)點(diǎn)擊事件，切換隱藏與顯示地圖文字
- mark標(biāo)記的基礎(chǔ)使用鸵钝，依次為：添加標(biāo)記糙臼，結(jié)束添加標(biāo)記事件，mark標(biāo)記點(diǎn)可拖拽恩商。
前期準(zhǔn)備工作
點(diǎn)擊這條連接注冊騰訊地圖開發(fā)者賬號
注意點(diǎn)
這是一個(gè)Vue集成騰訊地圖的demo
項(xiàng)目中需要在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', '騰訊地圖模板-博客展示')
書到此地变逃，大部分道友應(yīng)該直接復(fù)制粘貼就可以完美的跑起騰訊地圖了。
更新：如何加入位置逆解析服務(wù)
調(diào)用此服務(wù)必須擁有開發(fā)者賬號并申請屬于自己的key怠堪，點(diǎn)擊這條連接注冊騰訊地圖開發(fā)者賬號揽乱，獲取key名眉。
具體使用方法：
通過get方法調(diào)用 ：
{
rul:'http://localhost:9528/qq/ws/geocoder/v1/?location=lat,lng&key=你的key&get_poi=1'}
位置逆解析有幾處注意的地方：
- 跨域
不知道是不是只有自己這樣，在本地啟動(dòng)項(xiàng)目時(shí)調(diào)用逆解析地址會(huì)報(bà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/', // 這里后臺(tái)的地址模擬的;應(yīng)該填寫你們真實(shí)的后臺(tái)接口
ws: true,
changOrigin: true, // 允許跨域
pathRewrite: {
'^/qq': '' // 請求的時(shí)候使用這個(gè)api就可以
}}
},
- 授權(quán)報(bào)錯(cuò)
報(bào)錯(cuò)類型如下
{
"status": 110,
"message": "請求來源未被授權(quán), 此次請求來源域名：localhost9528"
}
{
"status": 112,
"message": "IP未被授權(quán)撒犀，當(dāng)前IP：127.0.0.1"
}
{
"status": 111,
"message": "簽名驗(yàn)證失敗"
}
解決方法均是通過騰訊位置服務(wù)平臺(tái)福压，結(jié)合官方文檔配置key管理，如圖
原文作者：咱們得站著 原文鏈接：https://blog.csdn.net/xiaoyaoluntian/article/details/112572353
