vue中百度地圖定位及附近搜索功能使用步驟
1.地圖初始化相關(guān)
申請賬號 => 創(chuàng)建應(yīng)用 => 生成key值 => 引入百度地圖,替換key值
在出口html(public/html)文件下引入標(biāo)簽
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=申請的ak">
2.獲取當(dāng)前定位
文檔:lbsyun.baidu.com/index.php?t…
創(chuàng)建地圖容器 可以為其他id名, 但必須有 用來展示地圖, 地圖大小與container大小一致
<div id="container"> </div>
獲取當(dāng)前位置
*注意,初始化地圖,獲取定位時,必須在mounted鉤子中,因為要先獲取到地圖容器
對于全局變量需要加上window(腳手架規(guī)則)
// 地圖獲取當(dāng)前定位 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)建點標(biāo)記 var mk = new BMapGL.Marker(r.point); // 在地圖上添加點標(biāo)記 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)建點坐標(biāo) const point = new window.BMapGL.Point(r.point.lng, r.point.lat) // 初始化地圖,設(shè)置中心點坐標(biāo)和地圖級別 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 }, // 地圖獲取當(dāng)前定位 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)建點坐標(biāo) map.centerAndZoom(point, 15); // 創(chuàng)建點標(biāo)記 var marker1 = new BMapGL.Marker(new BMapGL.Point(signLongitude, signLatitude)); // 在地圖上添加點標(biāo)記 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ù)當(dāng)前定位地址附近搜索建議
文檔:lbsyun.baidu.com/jsdemo.htm#…
根據(jù)當(dāng)前定位的結(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)建點標(biāo)記 var mk = new BMapGL.Marker(r.point); // 在地圖上添加點標(biāo)記 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); // 獲取到當(dāng)前定位的結(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 init webpack 下載依賴卡住不動的問題
這篇文章主要介紹了解決vue init webpack 下載依賴卡住不動的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項目方式
這篇文章主要介紹了vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項目方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04Vue el-table表頭上引入組件不能實時傳參解決方法分析
這篇文章主要介紹了Vue el-table表頭上引入組件不能實時傳參解決方法,總的來說這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2022-11-11SpringBoot+Vue項目線上買菜系統(tǒng)源碼展示
本線上買菜系統(tǒng)采用的數(shù)據(jù)庫是Mysql,使用springboot框架開發(fā)。在設(shè)計過程中,充分保證了系統(tǒng)代碼的良好可讀性、實用性、易擴展性、通用性、便于后期維護、操作方便以及頁面簡潔等特點,需要的朋友可以參考下2022-08-08