vue2实现百度地图定位

用的是vue2的地图定位插件

https://dafrok.github.io/vue-baidu-map/#/zh/control/city-list

1.首先肯定是先下载了

npm i vue-baidu-map -S

 2.下载完记得全局引入,在main.js文件

import BaiduMap from 'vue-baidu-map'


Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

3.开始使用,我在这做的事表格数据的每行的定位弹窗显示,当点击当前行的定位后,弹出弹窗显示地图定位点,定位点是动态跳动的,代码如下,点击如下小图标打开地图

 // 项圈定位打开弹窗
    positioning(row) {
      this.sign = true
      this.dialogMap = true
//时间
      this.time = row.distribute_time
//经度和纬度
      this.center.lng = parseInt(row.longitude)
      this.center.lat = parseInt(row.latitude)
    },

data中一定要先定义好字段

 dialogMap: false,//控制弹窗
      time: '',//定位点下的时间
      center: { lng: 0, lat: 0 }, //坐标
      zoom: 14,//缩放
      sign: false//弹窗开关

弹窗内容

 
        

          
        
        
          取 消
        
      

最后展示如图,可以切换卫星图

 希望对你有所帮助~