vue中百度地图定位及附近搜索功能使用步骤
作者：阿洋的小窝
这篇文章主要为大家介绍了vue中百度地图定位及附近搜索功能使用步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
1.地图初始化相关
申请账号 => 创建应用 => 生成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…
创建地图容器 可以为其他id名, 但必须有 用来展示地图, 地图大小与container大小一致
<div id="container"> </div>
获取当前位置
*注意,初始化地图,获取定位时,必须在mounted钩子中,因为要先获取到地图容器
对于全局变量需要加上window(脚手架规则)
// 地图获取当前定位
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);
that.position.signLongitude = r.point.lng
that.position.signLatitude = r.point.lat
// 创建点坐标
const point = new window.BMapGL.Point(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){
that.address = result.address // 获取逆编程的地址结果
}
});
}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}`)">地址微调</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 || '',
// 经纬度
position:{
// 经
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) {
// 调用成功时回调
console.log(res)
},
onFail: function (err) {
// 调用失败时回调
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(){
// 经度
const signLongitude = this.$route.query.lng
// 维度
const signLatitude = this.$route.query.lat
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(signLongitude , signLatitude); // 创建点坐标
map.centerAndZoom(point, 15);
// 创建点标记
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.根据当前定位地址附近搜索建议
文档:lbsyun.baidu.com/jsdemo.htm#…
根据当前定位的结果,给出建议相关列表
html相关:
<template>
<div class="map-page">
<div id="container-map">
</div>
<div class="search">
<van-search
v-model="value"
shape="round"
placeholder="请输入搜索关键词"
@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相关:
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 经度 lat 维度
chooseMap(addressItem){
this.addressDetail=addressItem.address
// 经度
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="请输入搜索关键词"
@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, // 经度
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 经度 lat 维度
chooseMap(addressItem){
this.addressDetail=addressItem.address
// 经度
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中百度地图定位及附近搜索功能使用步骤的详细内容，更多关于vue百度地图定位附近搜索的资料请关注脚本之家其它相关文章！