Vue百度地圖實現(xiàn)定位和marker拖拽監(jiān)聽功能
效果圖:拖拽前和拖拽后
一、完成地圖步驟
百度地圖文檔地址:地圖 JS API | 百度地圖API SDK
1、在index.html引入百度地圖
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密鑰"></script>
2、創(chuàng)建地圖容器,容器一定要設(shè)置寬高
<template> <div class='loction'> <div>位置信息:{{locationMsg}}</div> <!-- 地圖容器 --> <div id="allmap"></div> </div> </template> <style> .loction{ width: 300px; height: 300px; } #allmap{ width: 300px; height: 300px; } </style>
3、創(chuàng)建地圖實例
const map = new window.BMap.Map('allmap') // 創(chuàng)建Map實例 // 開啟SDK輔助定位獲取當(dāng)前位置信息 const getLocation = new window.BMap.Geolocation() getLocation.enableSDKLocation() getLocation.getCurrentPosition((position) => { // position中是獲取到的定位相關(guān)數(shù)據(jù) // 獲取城市和省 const city = position.address.city const province = position.address.province // 獲取經(jīng)度和緯度 const latitude = position.latitude const longitude = position.longitude this.locationMsg = province + city const point = new window.BMap.Point(position.point) // 設(shè)置中心點坐標(biāo) map.centerAndZoom(point, 15) // 地圖初始化,同時設(shè)置地圖展示級別為15 const marker= new window.BMap.Marker(position.point) // 創(chuàng)建標(biāo)注 map.addOverlay(marker) // 將標(biāo)注添加到地圖中 map.panTo(position.point, 15) //讓指定位置移動到地圖中心 // 開啟marker拖拽并監(jiān)聽拖拽后的位置信息 marker.enableDragging() // 可拖拽標(biāo)注 const _this = this marker.addEventListener('dragend', function (e) { // alert('當(dāng)前位置:' + e.point.lng + ', ' + e.point.lat) const nowPoint = marker.getPosition() // 拖拽完成之后坐標(biāo)的經(jīng)緯度 console.log(nowPoint, '拖拽后的經(jīng)緯度') map.centerAndZoom(nowPoint, 15) // 用所定位的經(jīng)緯度查找所在地省市街道等信息 const gc = new window.BMap.Geocoder() gc.getLocation(nowPoint, function (rs) { console.log(rs, '拖拽后的位置') _this.locationMsg = rs.address }) }) }, () => { this.locationMsg = '定位失敗!' }, { provider: 'baidu' })
二、百度地圖踩過的一些坑
1、'BMap' is not defined報錯
這個是和引入地圖有關(guān),官方文檔的寫法是var map = new BMapGL.Map('container')。如果是在index.html中引入的js文件,那么需要寫成var map = new window.BMapGL.Map('container');
2、標(biāo)注沒有出現(xiàn)在地圖中間而是左上角
是因為再次讓地圖顯示時,地圖已經(jīng)顯示了,但標(biāo)注還沒創(chuàng)建好,用一個setTimeout包裹一下就好了。
setTimeout(() => { map.panTo(this.newPosition, 16) },200)
3、定位不準(zhǔn)確
使用sdk輔助定位是相對來說比較準(zhǔn)確的,開發(fā)時只能在電腦上測試,電腦沒有g(shù)ps定位,所以有偏差很正常,打包上線后用手機(jī)測試就會很準(zhǔn)確了。
這是我入職前端遇到的第一個項目需求,從啥也不會到完成,經(jīng)歷了好幾天,出現(xiàn)過各種bug,然后又非常害怕被老板開除。整個過程充滿焦慮,緊張和不安,到完成終于可以松一口氣了。所以記錄一下。
到此這篇關(guān)于Vue百度地圖實現(xiàn)定位和marker拖拽監(jiān)聽的文章就介紹到這了,更多相關(guān)Vue百度地圖定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue cli3中eslint報錯no-undef和eslint規(guī)則配置方式
這篇文章主要介紹了vue cli3中eslint報錯no-undef和eslint規(guī)則配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08Vue實現(xiàn)動態(tài)響應(yīng)數(shù)據(jù)變化
本篇文章主要介紹了Vue 動態(tài)響應(yīng)數(shù)據(jù)變化,通過綁定數(shù)據(jù)即可以實時改變視圖顯示,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-04-04Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)
這篇文章主要為大家介紹了Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09