欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue百度地圖實現(xiàn)定位和marker拖拽監(jiān)聽功能

 更新時間:2022年11月17日 10:45:40   作者:很困的程序媛  
這篇文章主要介紹了Vue百度地圖實現(xiàn)定位和marker拖拽監(jiān)聽功能,實現(xiàn)思路非常簡單,本文結(jié)合實例代碼效果圖給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

效果圖:拖拽前和拖拽后

一、完成地圖步驟

百度地圖文檔地址:地圖 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)文章

  • Vite使用報錯解決方法合集

    Vite使用報錯解決方法合集

    這篇文章主要給大家介紹了關(guān)于Vite使用報錯解決方法的相關(guān)資料,這篇文中通過圖文以及代碼將遇到的一些報錯介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vite具有一定的借鑒價值,需要的朋友可以參考下
    2023-08-08
  • vue/cli安裝報錯及解決問題的方法圖文詳解

    vue/cli安裝報錯及解決問題的方法圖文詳解

    這篇文章主要給大家介紹了關(guān)于vue/cli安裝報錯及解決問題的方法,如果在安裝@vue/cli時遇到錯誤,大家可以嘗試以下步驟解決,需要的朋友可以參考下
    2023-07-07
  • vue3封裝放大鏡組件的實例代碼

    vue3封裝放大鏡組件的實例代碼

    這篇文章主要給大家介紹了關(guān)于vue3封裝放大鏡組件的相關(guān)資料,封裝之后,使用起來就更簡單了,一個組件一行就可以,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-09-09
  • vue cli3中eslint報錯no-undef和eslint規(guī)則配置方式

    vue cli3中eslint報錯no-undef和eslint規(guī)則配置方式

    這篇文章主要介紹了vue cli3中eslint報錯no-undef和eslint規(guī)則配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • 解決在vue的mounted中獲取對象為null問題

    解決在vue的mounted中獲取對象為null問題

    這篇文章主要介紹了解決在vue的mounted中獲取對象為null問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue如何實現(xiàn)本項目頁面之間跳轉(zhuǎn)

    vue如何實現(xiàn)本項目頁面之間跳轉(zhuǎn)

    這篇文章主要介紹了vue如何實現(xiàn)本項目頁面之間跳轉(zhuǎn),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue實現(xiàn)動態(tài)響應(yīng)數(shù)據(jù)變化

    Vue實現(xiàn)動態(tài)響應(yīng)數(shù)據(jù)變化

    本篇文章主要介紹了Vue 動態(tài)響應(yīng)數(shù)據(jù)變化,通過綁定數(shù)據(jù)即可以實時改變視圖顯示,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-04-04
  • vue-cli如何添加less 以及sass

    vue-cli如何添加less 以及sass

    本篇文章主要介紹了vue-cli如何添加less 以及sass,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)

    Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)

    這篇文章主要為大家介紹了Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 解決ele ui 表格表頭太長問題的實現(xiàn)

    解決ele ui 表格表頭太長問題的實現(xiàn)

    這篇文章主要介紹了解決ele ui 表格表頭太長問題的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11

最新評論