vue-baidu-map

# vue-baidu-map插件

# 官方地址

# 准备工作

注册百度地图并且创建 ak
- 先进入 http://lbsyun.baidu.com/ (opens new window) 官网注册账号
- 然后去控制台 -> 我的应用 -> 创建应用
- 复制访问应用中 ak

# 安装插件

npm install vue-baidu-map

# 在main中引入

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{ak:'此处粘贴你的百度地图ak'})

1
2

# 简单使用地图

<baidu-map
  id="allmap"
  <!--地图缩放-->
  :scroll-wheel-zoom="true"
  @ready="mapReady"
>
<!--地图标注-->
  <bm-marker :position="point" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
</baidu-map>

1
2
3
4
5
6
7
8
9

data(){
  return{
    point: "",
  }
},
methods:{
    // 地图初始化
    mapReady({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      this.scanMap();
    },
    // 地图坐标
    scanMap(){
      let point;
      if(this.stationInfo.coordinate){
        point = this.stationInfo.coordinate.split(',')
      } else {
        point = [116.404, 39.915]
      }
      this.point = new this.BMap.Point(point[0], point[1]);
      this.map.centerAndZoom(this.point, 15);
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#allmap{
    height: 330px;
    width: 100%;
    margin: 0 auto;
}

1
2
3
4
5

# API官网

百度地图 JavaScript API Lite版 (opens new window)

#插件

上次更新: 2024/08/14, 04:14:33

← 常见问题创建Vue3工程→