效果圖：
image.png
image.png
官方地址：https://lbs.qq.com/
如果你想創(chuàng)建一個(gè)地圖，那么你就要去申請一個(gè)key，然后放在 index.html里面引入
<script src="https://map.qq.com/api/gljs?v=1.exp&key=你申請的key"></script>
然后在對應(yīng)的組件內(nèi)就能創(chuàng)建地圖了,??要放到 mounted 周期內(nèi)執(zhí)行
<div id="container"></div>
//初始化地圖
initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地圖
this.map = new TMap.Map("container", {
rotation: 20, //設(shè)置地圖旋轉(zhuǎn)角度
pitch: 0, //設(shè)置俯仰角度（0~45）
zoom: 16, //設(shè)置地圖縮放級別
center: center //設(shè)置地圖中心點(diǎn)坐標(biāo)
});
},
當(dāng)然上面只是簡單的地圖使用，如果你想使用騰訊地圖更多的功能或api，那你就需要調(diào)用第三方接口了。
地點(diǎn)搜索：
image.png
地點(diǎn)搜索：點(diǎn)擊查看文檔地址
首先客戶端調(diào)用，需要解決跨域問題，這邊我是在 vue.config.js 進(jìn)行配置的,在proxy里面可以配置多個(gè)跨域地址。
??注意：要加上 pathRewrite: { '^/place': '' //重寫接口 }（很扯的一個(gè)坑）
proxy: {
// '/api': {
// target: 'https://xxxxx.com/api', //目標(biāo)接口域名
// changeOrigin: true, //是否跨域
// pathRewrite: {
// '^/api': '' //重寫接口
// }
// },
"/place": {
target: "https://apis.map.qq.com",
changeOrigin: true,
ws: true,
pathRewrite: {
'^/place': '' //重寫接口
}
},
},
配置完之后記得重新 npm run dev下，不然保存是無效的。
import axios from "axios";
axios({
url: `/place/ws/place/v1/suggestion?keyword=搜索內(nèi)容&key=你申請的key`,
method: "GET"
})
.then(res => {
if (res.data) {
//搜索結(jié)果
this.addressList = res.data.data;
}
})
.catch(err => {
console.log(err);
});
定位：
image.png
有提供api接口，但是不怎么好用，點(diǎn)擊參考api接口地址；
所以建議大家參考騰訊給的另一種方案，點(diǎn)擊查看前端定位組件；
index.html引入，其他部分建議參考文檔來
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
image.png
具體其他功能，大家可參考文檔，大部分的地圖使用也基本這樣。
??注意：下面的完整代碼沒有涉及到定位功能，不過參考上面提到的 前端地位組件，實(shí)現(xiàn)起來也是很簡單的。
完整代碼：
<template>
<div class="app-content">
<div class="Map">
<div class="search_Map">
<input type="text" v-model="value" @input="search(value)" />
<div class="content">
<p v-for="(i,index) in addressList" :key="index" @click="select(i)">
{{i.title}}
<span class="address">{{i.address}}</span>
</p>
</div>
</div>
<div id="container"></div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
value: "", //搜索內(nèi)容
addressList: [], //搜索結(jié)果
selectValue: {}, //選擇的某個(gè)結(jié)果
timeout: null, //搜索定時(shí)器
map: null,
marker: null
};
},
mounted() {
this.initMap();
},
methods: {
//初始化地圖
initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地圖
this.map = new TMap.Map("container", {
rotation: 20, //設(shè)置地圖旋轉(zhuǎn)角度
pitch: 0, //設(shè)置俯仰角度（0~45）
zoom: 16, //設(shè)置地圖縮放級別
center: center //設(shè)置地圖中心點(diǎn)坐標(biāo)
});
},
//地址搜索
search(value) {
this.addressList = [];
clearTimeout(this.timeout);
if (value) {
this.timeout = setTimeout(() => {
axios({
url: `/place/ws/place/v1/suggestion?keyword=${value}&key=你申請的key`,
method: "GET"
})
.then(res => {
if (res.data) {
this.addressList = res.data.data;
}
})
.catch(err => {
console.log(err);
});
}, 500);
}
},
//選擇對應(yīng)搜索地址
select(row) {
this.selectValue = row.location;
console.log(this.selectValue);
this.addressList = [];
let self = this;
//更新地圖中心位置
self.map.setCenter(
new TMap.LatLng(this.selectValue.lat, this.selectValue.lng)
);
//判斷是否存在標(biāo)記點(diǎn)，有的話清空
if (self.marker) {
self.marker.setMap(null);
self.marker = null;
}
//初始化marker
self.marker = new TMap.MultiMarker({
id: "marker-layer", //圖層id
map: self.map,
styles: {
//點(diǎn)標(biāo)注的相關(guān)樣式
marker: new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: { x: 16, y: 32 },
src:
"https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
})
},
geometries: [
{
//點(diǎn)標(biāo)注數(shù)據(jù)數(shù)組
id: "demo",
styleId: "marker",
position: new TMap.LatLng(
self.selectValue.lat,
self.selectValue.lng
),
properties: {
title: "marker"
}
}
]
});
}
}
};
</script>
<style lang="scss" scoped>
.Map {
position: relative;
.search_Map {
position: absolute;
left: 20px;
top: 20px;
z-index: 99009;
input {
border: 1px solid #f1f1f1;
display: inline-block;
width: 400px;
height: 40px;
padding: 10px;
color: #5a5a5a;
background: rgba(255, 255, 255, 0.904);
}
.content {
width: 400px;
background: rgba(252, 250, 250, 0.918);
border: 1px solid #f1f1f1;
border-top: none;
font-size: 13px;
color: #5a5a5a;
max-height: 350px;
overflow-y: auto;
p {
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 380px;
border-bottom: 1px solid #f1f1f1;
padding: 15px 10px;
margin: 0;
cursor: pointer;
&:hover {
background: #eff6fd;
}
.address {
font-size: 12px;
color: #b9b9b9;
margin-left: 20px;
}
}
}
}
}
#container {
width: 800px;
height: 400px;
}
</style>
