第vue中百度地圖定位及附近搜索功能使用步驟目錄1.地圖初始化相關(guān)2.獲取當(dāng)前定位3.根據(jù)當(dāng)前定位地址附近搜索建議

1.地圖初始化相關(guān)

文檔:/index.phpt

申請(qǐng)賬號(hào)=創(chuàng)建應(yīng)用=生成key值=引入百度地圖,替換key值

在出口html(public/html)文件下引入標(biāo)簽

scripttype="text/javascript"src="/apiv=1.0type=webglak=申請(qǐng)的ak"

2.獲取當(dāng)前定位

文檔:/index.phpt

創(chuàng)建地圖容器可以為其他id名,但必須有用來(lái)展示地圖,地圖大小與container大小一致

divid="container"

/div

獲取當(dāng)前位置

*注意,初始化地圖,獲取定位時(shí),必須在mounted鉤子中,因?yàn)橐全@取到地圖容器

對(duì)于全局變量需要加上window(腳手架規(guī)則)

//地圖獲取當(dāng)前定位

getPosition(){

//創(chuàng)建地圖實(shí)例

constmap=newwindow.BMapGL.Map('container')

//創(chuàng)建瀏覽器定位實(shí)例

vargeolocation=newwindow.BMapGL.Geolocation();

letthat=this

geolocation.getCurrentPosition(function(r){

if(this.getStatus()==BMAP_STATUS_SUCCESS){

//創(chuàng)建點(diǎn)標(biāo)記

varmk=newBMapGL.Marker(r.point);

//在地圖上添加點(diǎn)標(biāo)記

map.addOverlay(mk);

//將地圖平移至中心點(diǎn)

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)建點(diǎn)坐標(biāo)

constpoint=newwindow.BMapGL.Point(r.point.lng,r.point.lat)

//初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別

map.centerAndZoom(point,30)

//逆向編碼

varmyGeo=newBMapGL.Geocoder();

myGeo.getLocation(newBMapGL.Point(r.point.lng,r.point.lat),function(result){

if(result){

that.address=result.address//獲取逆編程的地址結(jié)果

}else{

alert('failed'+this.getStatus());

釘釘簽到定位完整代碼

template

div

divv-if="isSign"

div2025年08月26日/div

div

div

h3imgsrc="../../assets/images/公司@2x.png"alt=""{{address}}/h3

span@click="$router.replace(`/mapplanId=${$route.query.planId}`)"地址微調(diào)/span

/div

div

divid="container"

/div

/div

/div

div@click="toSignIn"

span簽到/span

div{{dateNow}}/div

span未簽到/span

/div

/div

/div

/template

script

importdayjsfrom'dayjs'

import{Toast}from'vant';

exportdefault{

name:'sign-in',

data(){

return{

dateNow:newDate().getHours()+':'+newDate().getMinutes()+':'+newDate().getSeconds(),

timer:null,

isSign:true,

//定位地點(diǎn)

address:this.$route.query.address||'',

//經(jīng)緯度

position:{

//經(jīng)

signLongitude:'',

//維

signLatitude:''

created(){

this.timer=setInterval(()={

constdateNow=Date.now()

this.dateNow=dayjs(dateNow).format('HH:mm:ss')

},1000)

if(this.$dd.env.platform==='notInDingTalk')return

this.$.navigation.setTitle({

title:'簽到',

onSuccess:function(res){

//調(diào)用成功時(shí)回調(diào)

console.log(res)

onFail:function(err){

//調(diào)用失敗時(shí)回調(diào)

console.log(err)

methods:{

//點(diǎn)擊簽到

toSignIn(){

if(!this.address){

Toast('暫未定位到地址')

return

this.isSign=false

getAddress(address){

console.log(address);

this.address=address

//地圖獲取當(dāng)前定位

getPosition(){

constmap=newwindow.BMapGL.Map('container')

vargeolocation=newwindow.BMapGL.Geolocation();

letthat=this

geolocation.getCurrentPosition(function(r){

if(this.getStatus()==BMAP_STATUS_SUCCESS){

varmk=newBMapGL.Marker(r.point);

map.addOverlay(mk);

map.panTo(r.point);

console.log('您的位置：'+r.point.lng+','+r.point.lat);

constpoint=newwindow.BMapGL.Point(r.point.lng,r.point.lat)

that.position.signLongitude=r.point.lng

that.position.signLatitude=r.point.lat

map.centerAndZoom(point,30)

//逆向編碼

varmyGeo=newBMapGL.Geocoder();

myGeo.getLocation(newBMapGL.Point(r.point.lng,r.point.lat),function(result){

if(result){

that.address=result.address

}else{

alert('failed'+this.getStatus());

//展示地圖

setPosition(){

//經(jīng)度

constsignLongitude=this.$route.query.lng

//維度

constsignLatitude=this.$route.query.lat

varmap=newBMapGL.Map("container");//創(chuàng)建地圖實(shí)例

varpoint=newBMapGL.Point(signLongitude,signLatitude);//創(chuàng)建點(diǎn)坐標(biāo)

map.centerAndZoom(point,15);

//創(chuàng)建點(diǎn)標(biāo)記

varmarker1=newBMapGL.Marker(newBMapGL.Point(signLongitude,signLatitude));

//在地圖上添加點(diǎn)標(biāo)記

map.addOverlay(marker1);

destroyed(){

clearInterval(this.timer)

mounted(){

//有傳來(lái)的地址就回顯定位,無(wú)則進(jìn)行定位

if(this.address){

this.setPosition()

}else{

this.getPosition()

//constpoint=newwindow.BMapGL.Point(116.404,39.915)

//map.centerAndZoom(point,30)

/script

stylescopedlang="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;

height:32px;

line-height:1;

font-size:16px;

border-bottom:1pxsolid#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:0px4px13px0px#BDE4FF;

.time{

margin-top:7px;

.no-sign{

position:absolute;

top:150px;

color:#999999;

font-size:12px;

/style

3.根據(jù)當(dāng)前定位地址附近搜索建議

文檔:/jsdemo.htm#

根據(jù)當(dāng)前定位的結(jié)果,給出建議相關(guān)列表

html相關(guān):

template

div

divid="container-map"

/div

div

van-search

v-model="value"

shape="round"

placeholder="請(qǐng)輸入搜索關(guān)鍵詞"

@focus="$router.replace(`/searchMapplanId=${$route.query.planId}`)"

/div

div

van-cellv-for="(item,index)inaddressList":key="index":value="item.address"@click="chooseMap(item)"/

/div

/div

/template

js相關(guān):

mounted(){

//創(chuàng)建地圖實(shí)例

constmap=newwindow.BMapGL.Map('container-map')

//創(chuàng)建瀏覽器定位實(shí)例

vargeolocation=newwindow.BMapGL.Geolocation();

letthat=this

geolocation.getCurrentPosition(function(r){

if(this.getStatus()==BMAP_STATUS_SUCCESS){

//創(chuàng)建點(diǎn)標(biāo)記

varmk=newBMapGL.Marker(r.point);

//在地圖上添加點(diǎn)標(biāo)記

map.addOverlay(mk);

//將地圖平移至中心點(diǎn)

map.panTo(r.point);

//console.log('您的位置：'+r.point.lng+','+r.point.lat);

constpoint=newwindow.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)

//逆向編碼

varmyGeo=newBMapGL.Geocoder();

myGeo.getLocation(newBMapGL.Point(r.point.lng,r.point.lat),function(result){

if(result){

console.log(result.address);

//獲取到當(dāng)前定位的結(jié)果,調(diào)用搜索建議

that.getLocation(result.address)

}else{

alert('failed'+this.getStatus());

//constpoint=newwindow.BMapGL.Point(116.404,39.915)

//map.centerAndZoom(point,30)

methods:{

//搜索建議

getLocation(address){

varmap=newBMapGL.Map("container-map");

varmPoint=newBMapGL.Point(this.lng,this.lat);

map.enableScrollWheelZoom();

map.centerAndZoom(mPoint,15);

//繪制圓形范圍覆蓋物

varcircle=newBMapGL.Circle(mPoint,1000,{fillColor:"blue",strokeWeight:1,fillOpacity:0.3,strokeOpacity:0.3});

map.addOverlay(circle);

varlocal=newBMapGL.LocalSearch(map,{renderOptions:{map:map,autoViewport:false}});

//定義搜索地址,以及范圍距離

local.searchNearby(address,mPoint,1000);

console.log(local);

this.addressList=local._arrPois

//點(diǎn)擊選擇地址lng經(jīng)度lat維度

chooseMap(addressItem){

this.addressDetail=addressItem.address

//經(jīng)度

constlng=addressItem.marker.latLng.lng

//維度

constlat=addressItem.marker.latLng.lat

this.$router.replace(`/signInaddress=${this.addressDetail}planId=${this.$route.query.planId}lng=${lng}lat=${lat}`)

//that.$emit('getAddress',this.addressDetail)

完整代碼:

template

div

divid="container-map"

/div

div

van-search

v-model="value"

shape="round"

placeholder="請(qǐng)輸入搜索關(guān)鍵詞"

@focus="$router.replace(`/searchMapplanId=${$route.query.planId}`)"

/div

div

van-cellv-for="(item,index)inaddressList":key="index":value="item.address"@click="chooseMap(item)"/

/div

/div

/template

script

import{Search,Cell}from'vant'

exportdefault{

name:'map',

components:{

[S]:Search,

[C]:Cell,

data(){

return{

value:"",

lng:0,//經(jīng)度

lat:0,//維度

//搜索地址列表

addressList:[],

//詳細(xì)地址

addressDetail:""

mounted(){

constmap=newwindow.BMapGL.Map('container-map')

vargeolocation=newwindow.BMapGL.Geolocation();

letthat=this

geolocation.getCurrentPosition(function(r){

if(this.getStatus()==BMAP_STATUS_SUCCESS){

varmk=newBMapGL.Marker(r.point);

map.addOverlay(mk);

map.panTo(r.point);

//console.log('您的位置：'+r.point.lng+','+r.point.lat);

constpoint=newwindow.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)

//逆向編碼

varmyGeo=newBMapGL.Geocoder();

myGeo.getLocation(newBMapGL.Point(r.point.lng,r.point.lat),function(result){

if(result){

console.log(result.address);

that.getLocation(result.address)

}else{

alert('failed'+this.getStatus());

//constpoint=newwindow.BMapGL.Point(116.404,39.915)

//map.centerAndZoom(point,30)

methods:{

//搜索建議

getLocation(addres