vue中百度地圖定位及附近搜索功能使用步驟
更新時間：2022年09月06日 16:02:38 作者：阿洋的小窩
這篇文章主要為大家介紹了vue中百度地圖定位及附近搜索功能使用步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
1.地圖初始化相關(guān)
申請賬號 => 創(chuàng)建應(yīng)用 => 生成key值 => 引入百度地圖,替換key值
在出口html(public/html)文件下引入標簽
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=申請的ak">
2.獲取當前定位
文檔:lbsyun.baidu.com/index.php?t…
創(chuàng)建地圖容器 可以為其他id名, 但必須有 用來展示地圖, 地圖大小與container大小一致
<div id="container"> </div>
獲取當前位置
*注意,初始化地圖,獲取定位時,必須在mounted鉤子中,因為要先獲取到地圖容器
對于全局變量需要加上window(腳手架規(guī)則)
// 地圖獲取當前定位
getPosition(){
// 創(chuàng)建地圖實例
const map = new window.BMapGL.Map('container')
// 創(chuàng)建瀏覽器定位實例
var geolocation = new window.BMapGL.Geolocation();
let that = this
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
// 創(chuàng)建點標記
var mk = new BMapGL.Marker(r.point);
// 在地圖上添加點標記
map.addOverlay(mk);
// 將地圖平移至中心點
map.panTo(r.point);
console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
that.position.signLongitude = r.point.lng
that.position.signLatitude = r.point.lat
// 創(chuàng)建點坐標
const point = new window.BMapGL.Point(r.point.lng, r.point.lat)
// 初始化地圖，設(shè)置中心點坐標和地圖級別
map.centerAndZoom(point, 30)
// 逆向編碼
var myGeo = new BMapGL.Geocoder();
myGeo.getLocation(new BMapGL.Point(r.point.lng,r.point.lat), function(result){
if (result){
that.address = result.address // 獲取逆編程的地址結(jié)果
}
});
}else{
alert('failed' + this.getStatus());
}
});
},
釘釘簽到定位完整代碼
<template>
<div class="sign-in">
<div v-if="isSign">
<div class="time-sign">2022年08月26日</div>
<div class="map-card">
<div class="title">
<h3 class="ellipsis"><img class="company" src="../../assets/images/公司@2x.png" alt="">{{address}}</h3>
<span class="position" @click="$router.replace(`/map?planId=${$route.query.planId}`)">地址微調(diào)</span>
</div>
<div class="map">
<div id="container">
</div>
</div>
</div>
<div class="sign-in-box" @click="toSignIn">
<span>簽到</span>
<div class="time">{{dateNow}}</div>
<span class="no-sign">未簽到</span>
</div>
</div>
</div>
</template>
<script>
import dayjs from 'dayjs'
import { Toast } from 'vant';
export default {
name: 'sign-in',
data () {
return {
dateNow: new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds(),
timer: null,
isSign:true,
// 定位地點
address: this.$route.query.address || '',
// 經(jīng)緯度
position:{
// 經(jīng)
signLongitude:'',
// 維
signLatitude:''
}
}
},
created () {
this.timer = setInterval(() => {
const dateNow = Date.now()
this.dateNow = dayjs(dateNow).format('HH:mm:ss')
}, 1000)
if (this.$dd.env.platform === 'notInDingTalk') return
this.$dd.biz.navigation.setTitle({
title: '簽到',
onSuccess: function (res) {
// 調(diào)用成功時回調(diào)
console.log(res)
},
onFail: function (err) {
// 調(diào)用失敗時回調(diào)
console.log(err)
}
})
},
methods:{
// 點擊簽到
toSignIn(){
if(!this.address) {
Toast('暫未定位到地址')
return
}
this.isSign = false
},
getAddress(address){
console.log(address);
this.address = address
},
// 地圖獲取當前定位
getPosition(){
const map = new window.BMapGL.Map('container')
var geolocation = new window.BMapGL.Geolocation();
let that = this
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMapGL.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
const point = new window.BMapGL.Point(r.point.lng, r.point.lat)
that.position.signLongitude = r.point.lng
that.position.signLatitude = r.point.lat
map.centerAndZoom(point, 30)
// 逆向編碼
var myGeo = new BMapGL.Geocoder();
myGeo.getLocation(new BMapGL.Point(r.point.lng,r.point.lat), function(result){
if (result){
that.address = result.address
}
});
}else{
alert('failed' + this.getStatus());
}
});
},
// 展示地圖
setPosition(){
// 經(jīng)度
const signLongitude = this.$route.query.lng
// 維度
const signLatitude = this.$route.query.lat
var map = new BMapGL.Map("container"); // 創(chuàng)建地圖實例
var point = new BMapGL.Point(signLongitude , signLatitude); // 創(chuàng)建點坐標
map.centerAndZoom(point, 15);
// 創(chuàng)建點標記
var marker1 = new BMapGL.Marker(new BMapGL.Point(signLongitude, signLatitude));
// 在地圖上添加點標記
map.addOverlay(marker1);
}
},
destroyed () {
clearInterval(this.timer)
},
mounted () {
// 有傳來的地址就回顯定位, 無則進行定位
if(this.address) {
this.setPosition()
} else{
this.getPosition()
}
// const point = new window.BMapGL.Point(116.404, 39.915)
// map.centerAndZoom(point, 30)
},
}
</script>
<style scoped lang="less">
.sign-in{
height: 100vh;
background-color: #F9F9F9;
#container{
width: 315px;
height: 100px;
}
.company{
width: 12px;
height: 14px;
margin-right: 5px;
}
.position{
white-space: nowrap;
}
.time-sign{
margin-left: 15px;
height: 40px;
line-height: 40px;
font-size: 12px;
color: #666666;
}
.map-card{
padding: 15px;
margin: auto;
width: 345px;
height: 180px;
background-color: #fff;
border-radius: 12px;
.title{
display: flex;
width: 100%;
justify-content: space-between;
font-size: 12px;
span{
color: #30A7FA;
line-height: 1;
}
}
h3{
height: 32px;
line-height: 1;
font-size: 16px;
border-bottom: 1px solid #f8f8f8;
}
.map{
margin-top: 15px;
}
}
.sign-in-box{
position: relative;
margin: auto;
margin-top: 147px;
width: 140px;
height: 140px;
background-color: #30A7FA;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0px 4px 13px 0px #BDE4FF;
.time{
margin-top: 7px;
}
.no-sign{
position: absolute;
top: 150px;
color: #999999;
font-size: 12px;
}
}
}
</style>
3.根據(jù)當前定位地址附近搜索建議
文檔:lbsyun.baidu.com/jsdemo.htm#…
根據(jù)當前定位的結(jié)果,給出建議相關(guān)列表
html相關(guān):
<template>
<div class="map-page">
<div id="container-map">
</div>
<div class="search">
<van-search
v-model="value"
shape="round"
placeholder="請輸入搜索關(guān)鍵詞"
@focus="$router.replace(`/searchMap?planId=${$route.query.planId}`)"
/>
</div>
<div class="addressList" >
<van-cell v-for="(item,index) in addressList" :key="index" :value="item.address" @click="chooseMap(item)" />
</div>
</div>
</template>
js相關(guān):
mounted () {
// 創(chuàng)建地圖實例
const map = new window.BMapGL.Map('container-map')
// 創(chuàng)建瀏覽器定位實例
var geolocation = new window.BMapGL.Geolocation();
let that = this
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
// 創(chuàng)建點標記
var mk = new BMapGL.Marker(r.point);
// 在地圖上添加點標記
map.addOverlay(mk);
// 將地圖平移至中心點
map.panTo(r.point);
// console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
const point = new window.BMapGL.Point(r.point.lng, r.point.lat)
that.lng = r.point.lng
that.lat = r.point.lat
console.log(r.point.lng, r.point.lat);
map.centerAndZoom(point, 30)
// 逆向編碼
var myGeo = new BMapGL.Geocoder();
myGeo.getLocation(new BMapGL.Point(r.point.lng,r.point.lat), function(result){
if (result){
console.log(result.address);
// 獲取到當前定位的結(jié)果, 調(diào)用搜索建議
that.getLocation(result.address)
}
});
}else{
alert('failed' + this.getStatus());
}
});
// const point = new window.BMapGL.Point(116.404, 39.915)
// map.centerAndZoom(point, 30)
},
methods:{
// 搜索建議
getLocation(address){
var map = new BMapGL.Map("container-map");
var mPoint = new BMapGL.Point(this.lng, this.lat);
map.enableScrollWheelZoom();
map.centerAndZoom(mPoint,15);
// 繪制圓形范圍覆蓋物
var circle = new BMapGL.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
map.addOverlay(circle);
var local = new BMapGL.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
// 定義搜索地址,以及范圍距離
local.searchNearby(address,mPoint,1000);
console.log(local);
this.addressList = local._arrPois
},
// 點擊選擇地址 lng 經(jīng)度 lat 維度
chooseMap(addressItem){
this.addressDetail=addressItem.address
// 經(jīng)度
const lng = addressItem.marker.latLng.lng
// 維度
const lat = addressItem.marker.latLng.lat
this.$router.replace(`/signIn?address=${this.addressDetail}&planId=${this.$route.query.planId}&lng=${lng}&lat=${lat}`)
// that.$emit('getAddress', this.addressDetail)
}
}
完整代碼:
<template>
<div class="map-page">
<div id="container-map">
</div>
<div class="search">
<van-search
v-model="value"
shape="round"
placeholder="請輸入搜索關(guān)鍵詞"
@focus="$router.replace(`/searchMap?planId=${$route.query.planId}`)"
/>
</div>
<div class="addressList" >
<van-cell v-for="(item,index) in addressList" :key="index" :value="item.address" @click="chooseMap(item)" />
</div>
</div>
</template>
<script>
import { Search , Cell} from 'vant'
export default {
name: 'map-page',
components:{
[Search.name]:Search,
[Cell.name]:Cell,
},
data () {
return {
value:"",
lng:0, // 經(jīng)度
lat:0, // 維度
// 搜索地址列表
addressList:[],
// 詳細地址
addressDetail:""
}
},
mounted () {
const map = new window.BMapGL.Map('container-map')
var geolocation = new window.BMapGL.Geolocation();
let that = this
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMapGL.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
// console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
const point = new window.BMapGL.Point(r.point.lng, r.point.lat)
that.lng = r.point.lng
that.lat = r.point.lat
console.log(r.point.lng, r.point.lat);
map.centerAndZoom(point, 30)
// 逆向編碼
var myGeo = new BMapGL.Geocoder();
myGeo.getLocation(new BMapGL.Point(r.point.lng,r.point.lat), function(result){
if (result){
console.log(result.address);
that.getLocation(result.address)
}
});
}else{
alert('failed' + this.getStatus());
}
});
// const point = new window.BMapGL.Point(116.404, 39.915)
// map.centerAndZoom(point, 30)
},
methods:{
// 搜索建議
getLocation(address){
var map = new BMapGL.Map("container-map");
var mPoint = new BMapGL.Point(this.lng, this.lat);
map.enableScrollWheelZoom();
map.centerAndZoom(mPoint,15);
var circle = new BMapGL.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
map.addOverlay(circle);
var local = new BMapGL.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
local.searchNearby(address,mPoint,1000);
console.log(local);
this.addressList = local._arrPois
},
// 點擊選擇地址 lng 經(jīng)度 lat 維度
chooseMap(addressItem){
this.addressDetail=addressItem.address
// 經(jīng)度
const lng = addressItem.marker.latLng.lng
// 維度
const lat = addressItem.marker.latLng.lat
this.$router.replace(`/signIn?address=${this.addressDetail}&planId=${this.$route.query.planId}&lng=${lng}&lat=${lat}`)
// that.$emit('getAddress', this.addressDetail)
}
}
}
</script>
<style scoped lang="less">
// 地圖大小
#container-map{
width: 100%;
height: 180px;
}
</style>以上就是vue中百度地圖定位及附近搜索功能使用步驟的詳細內(nèi)容，更多關(guān)于vue百度地圖定位附近搜索的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue.2.0.5過渡效果使用技巧，實例分析了Vue.2.0.5過渡效果的技巧，非常具有實用價值，需要的朋友可以參考下。2017-03-03
解決vue init webpack 下載依賴卡住不動的問題
這篇文章主要介紹了解決vue init webpack 下載依賴卡住不動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項目方式
這篇文章主要介紹了vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項目方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue如何監(jiān)聽某個元素的大小變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue與iframe之間的信息交互的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
Vue el-table表頭上引入組件不能實時傳參解決方法分析
這篇文章主要介紹了Vue el-table表頭上引入組件不能實時傳參解決方法，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2022-11-11
這篇文章主要介紹了Vue axios獲取token臨時令牌封裝案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
SpringBoot+Vue項目線上買菜系統(tǒng)源碼展示
本線上買菜系統(tǒng)采用的數(shù)據(jù)庫是Mysql，使用springboot框架開發(fā)。在設(shè)計過程中，充分保證了系統(tǒng)代碼的良好可讀性、實用性、易擴展性、通用性、便于后期維護、操作方便以及頁面簡潔等特點,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了如何在Vue項目中使用vuex問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
如果你在社交媒體上停留的時間過長，那么，你所在的網(wǎng)站很可能正在使用無限滾動組件。這篇文章教你利用Vue3實現(xiàn)無限滾動組件，感興趣的可以參考一下2022-09-09