Vue引入騰訊地圖全過(guò)程(搜索獲取定位)
更新時(shí)間：2023年10月11日 10:13:28 作者：on?loading
最近需要在項(xiàng)目中使用地圖顯示點(diǎn)位信息,所以引入了騰訊地圖,這篇文章主要給大家介紹了關(guān)于Vue引入騰訊地圖(搜索獲取定位)的相關(guān)資料,需要的朋友可以參考下
效果：
申請(qǐng)騰訊地圖
1.首先進(jìn)入騰訊位置服務(wù)登陸/注冊(cè)，地址：https://lbs.qq.com/
2.進(jìn)入控制臺(tái)，點(diǎn)擊左側(cè)菜單應(yīng)用管理—我的應(yīng)用，點(diǎn)擊右上方創(chuàng)建應(yīng)用，填寫(xiě)內(nèi)容如下
WebServiceAPI里根據(jù)自己的情況填寫(xiě)
保存后顯示剛剛的應(yīng)用即可使用騰訊地圖
開(kāi)始使用騰訊地圖
以Vue項(xiàng)目為例，在index.html文件中添加
<head>
<!-- 引入騰訊地圖api -->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=騰訊地圖key"></script>
</head>新建map.vue 騰訊地圖組件
<template>
<!-- <el-dialog
:append-to-body="true"
title="選擇地址"
:visible.sync="isShowDialog"
width="1000px"
top="50px"> -->
<div>
<!-- <div class="search">
<el-input placeholder="請(qǐng)輸入搜索地址信息" v-model="keyword" clearable>
<el-button slot="append" icon="el-icon-search" @click="searchAddress"></el-button>
</el-input>
</div> -->
<el-table
v-if="isShowDialog"
highlight-current-row
:data="nearPointList"
height="300"
style="width: 100%"
class="table"
>
<el-table-column prop="address" label="附近推薦地點(diǎn)">
<template slot-scope="scope">
{{ scope.row.address }}{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template slot-scope="scope">
<el-button
@click.native.prevent="selectAddress(scope.row, 2)"
type="text"
>確認(rèn)選擇</el-button
>
</template>
</el-table-column>
</el-table>
<div id="mapContainer" style="width: 100%; height: 350px"></div>
<div class="address">
<!-- <span>當(dāng)前選點(diǎn)：</span>
<b>{{nowAddress ? (nowAddress.addressComponents.province + nowAddress.addressComponents.city + nowAddress.addressComponents.district + nowAddress.addressComponents.streetNumber) : '尚未選點(diǎn)'}}</b> -->
<!-- <el-button v-if="nowAddress" @click="selectAddress(nowAddress, 1)" type="text">【確認(rèn)選擇】</el-button> -->
</div>
</div>
<!--
</el-dialog> -->
</template>
<script>
export default {
data() {
return {
keyword: "", // 搜索關(guān)鍵詞
nearPointList: [], // 附近地址
isShowDialog: false, // 是否顯示彈窗
markersArray: [],
geocoder: null,
nowAddress: null, // 選擇的地點(diǎn)
geocoderLocation: null,
};
},
mounted() {
this.initMap();
},
methods: {
// 搜索地址
// searchAddress() {
// if (!this.keyword) {
// return this.$message.error("請(qǐng)輸入搜索地址信息");
// }
// this.setLocationByAddress(this.keyword);
// },
// 初始化地圖
initMap() {
let that = this;
let latLon = new qq.maps.LatLng(39.916527, 116.397128);
var map = new qq.maps.Map(document.getElementById("mapContainer"), {
zoom: 13,
center: latLon,
mapTypeId: qq.maps.MapTypeId.ROADMAP,
});
var listener = qq.maps.event.addListener(map, "click", function (event) {
that.setLocationByLatLng(event.latLng.getLat(), event.latLng.getLng());
});
// 經(jīng)緯度解析類(lèi)回調(diào)函數(shù)
this.geocoder = new qq.maps.Geocoder({
complete: function (result) {
that.nowAddress = result.detail;
that.nearPointList = result.detail.nearPois;
map.setCenter(result.detail.location);
// 標(biāo)記點(diǎn)
let marker = new qq.maps.Marker({
map: map,
position: result.detail.location,
});
that.markersArray.push(marker);
if (that.markersArray.length > 1) {
for (let i = 0; i < that.markersArray.length - 1; i++) {
that.markersArray[i].setMap(null); // 清除標(biāo)記
}
}
},
});
// 地址解析回調(diào)函數(shù)
that.geocoderLocation = new qq.maps.Geocoder({
complete: function (result) {
// 查找附近的點(diǎn)
let latLng = new qq.maps.LatLng(
result.detail.location.lat,
result.detail.location.lng
);
that.geocoder.getAddress(latLng);
},
});
},
// 選擇地址事件
selectAddress(item, type) {
let info = this.nowAddress.addressComponents;
if (type === 1) {
let addressInfo = item.addressComponents;
this.$emit(
"on-select",
addressInfo.province +
addressInfo.city +
addressInfo.district +
addressInfo.streetNumber,
item.location.lat,
item.location.lng,
info.province,
info.city,
info.district
);
this.isShowDialog = false;
}
if (type === 2) {
this.$emit(
"on-select",
item.address,
item.latLng.lat,
item.latLng.lng,
info.province,
info.city,
info.district
);
this.isShowDialog = false;
}
},
// 顯示地圖
// show() {
// setTimeout(() => {
// // this.keyword = '';
// this.initMap();
// })
// },
// 根據(jù)地址信息進(jìn)行定位
setLocationByAddress(address) {
setTimeout(() => {
this.geocoderLocation.getLocation(address);
});
},
// 根據(jù)經(jīng)緯度進(jìn)行定位
setLocationByLatLng(lat, lng) {
setTimeout(() => {
this.isShowDialog = true;
let latLng = new qq.maps.LatLng(lat, lng);
this.geocoder.getAddress(latLng);
});
},
},
};
</script>
<style scoped lang="scss">
.search {
margin-bottom: 15px;
margin-top: -20px;
}
.address {
margin-top: 15px;
margin-bottom: 10px;
.el-button {
padding: 0;
}
}
.table {
.el-button {
padding: 0;
}
}
</style>頁(yè)面引用
<el-form>
<el-form-item
label="詳細(xì)地址"
label-width="100px"
prop="address1"
clearable
>
<!-- 地圖容器 -->
<!-- <el-input
@change="handleSearch"
v-model="keyWord"
clearable
placeholder="請(qǐng)輸入地址來(lái)直接查找相關(guān)位置"
style="width: 500px"
></el-input>
<div id="container"></div> -->
<div style="width:90%;">
<div class="xqk">
<span>{{ info.address }}</span>
</div>
<el-input placeholder="請(qǐng)選擇地址" v-model="keyWord" @change="openMap()">
<el-button slot="append" icon="el-icon-location" @click="openMap()"></el-button>
</el-input>
<TMap ref="ms" @on-select="selectAddress" />
</div>
</el-form-item>
</el-form>頁(yè)面js
// 打開(kāi)地圖彈窗
openMap() {
jsonp('https://apis.map.qq.com/ws/geocoder/v1/?address=', {
output: 'jsonp',
address: this.keyWord,
key: '申請(qǐng)騰訊地圖key'
}).then(res => {
console.log(res)
if (res.status == 0) {
// 通過(guò)地址得到經(jīng)緯度
// locations.value = `${res.result.location.lat},${res.result.location.lng}`
// let center = new qq.maps.LatLng(res.result.location.lat, res.result.location.lng)
// map.panTo(center) // 重新設(shè)置地圖中心點(diǎn)
// initMap(res.result.location.lat, res.result.location.lng)
this.$refs.ms.setLocationByLatLng(res.result.location.lat, res.result.location.lng);
} else {
this.$messages(res.message)
}
}).catch(err => {
// search_btn.value = false
console.log('地圖錯(cuò)誤：', err);
})
// 根據(jù)省市區(qū)設(shè)置初始值
// this.$refs.ms.setLocationByAddress(this.mainForm.address);
// 根據(jù)經(jīng)緯度設(shè)置初始值
// this.$refs.ms.setLocationByLatLng(this.mainForm.lat, this.mainForm.lng);
},
// 地址選擇后的回調(diào)函數(shù)
selectAddress(address, lat, lng, province, city, area) {
this.info.lat = lat;
this.info.lng = lng;
this.info.province = province;
this.info.city = city;
this.info.area = area;
this.info.address = address;
this.keyWord = address;
// this.mainForm.address = address;
// this.mainForm.lat = lat;
// this.mainForm.lng = lng;
},總結(jié)
到此這篇關(guān)于Vue引入騰訊地圖的文章就介紹到這了,更多相關(guān)Vue引入騰訊地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個(gè)封裝
本篇文章主要介紹了詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個(gè)封裝，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue利用sync語(yǔ)法糖實(shí)現(xiàn)modal彈框的項(xiàng)目實(shí)踐
本文主要介紹了vue利用sync語(yǔ)法糖實(shí)現(xiàn)modal彈框的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
本文主要介紹在Vue中使用debouce防抖函數(shù)，設(shè)置一個(gè)門(mén)檻值，表示兩次?Ajax?通信的最小間隔時(shí)間。如果在間隔時(shí)間內(nèi)，發(fā)生新的keydown事件，則不觸發(fā)?Ajax?通信，并且重新開(kāi)始計(jì)時(shí)。如果過(guò)了指定時(shí)間，沒(méi)有發(fā)生新的keydown事件再將數(shù)據(jù)發(fā)送出去，這便是debouce防抖函數(shù)2021-12-12
本篇文章主要介紹了Vue調(diào)試神器vue-devtools安裝方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
vue使用el-table動(dòng)態(tài)合并列及行
這篇文章主要為大家詳細(xì)介紹了vue使用el-table動(dòng)態(tài)合并列及行，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue router點(diǎn)擊打開(kāi)新的標(biāo)簽頁(yè)的方法(最新推薦)
vue router點(diǎn)擊打開(kāi)新的標(biāo)簽頁(yè)的方法,只需要在router-link中加入target="_blank"即可在新的頁(yè)面打開(kāi)標(biāo)簽,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
這篇文章主要介紹了vue組件通信傳值操作,結(jié)合實(shí)例形式分析了vue.js父子組件通信及兄弟組件通信相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
vant van-list下拉加載更多onload事件問(wèn)題
這篇文章主要介紹了vant van-list下拉加載更多onload事件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
今天小編就為大家分享一篇vue之延時(shí)刷新實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vuex給state中的對(duì)象新添加屬性遇到的問(wèn)題及解決
這篇文章主要介紹了Vuex給state中的對(duì)象新添加屬性遇到的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01