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百度地图定位附近搜索的资料请关注脚本之家其它相关文章!
相关文章
解决vue init webpack 下载依赖卡住不动的问题
这篇文章主要介绍了解决vue init webpack 下载依赖卡住不动的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11Vue el-table表头上引入组件不能实时传参解决方法分析
这篇文章主要介绍了Vue el-table表头上引入组件不能实时传参解决方法,总的来说这并不是一道难题,那为什么要拿出这道题介绍?拿出这道题真正想要传达的是解题的思路,以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路2022-11-11
最新评论