Vue中使用百度地图Vue Baidu Map(vue-baidu-map)

最近负责的一个vue项目中需要调用百度地图api做标记打点的需求，记录一下：

vue-baidu-map 官方地址

一.插件的安装

1.npm 安装

$ npm install vue-baidu-map --save
1

2.js 引入

index.html 中

<script src="https://unpkg.com/vue-baidu-map"></script>
1

二.使用

1.全局注册(一次性引入百度地图组件的所有组件)

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

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

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.局部注册(按需引入组件)

局部注册的BaiduMap组件必须声明ak属性。 所有的独立组件均存放在vue-baidu-map/components文件夹下，按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认include和exclude选项命中了组件库。

3.CND全局注册

<script>
Vue.use(VueBaiduMap.default, {
  ak: 'YOUR_APP_KEY'
})
</script>
1
2
3
4
5

我项目中所需功能比较简单，所以我选择了第二种方法局部引入了以下几种组件：

mport BaiduMap from ‘vue-baidu-map/components/map/Map.vue’;

import BmView from ‘vue-baidu-map/components/map/MapView’; //地图视图

import BmLocalSearch from ‘vue-baidu-map/components/search/LocalSearch’; //搜索

import BmMarker from ‘vue-baidu-map/components/overlays/Marker’; //点标注

import BmInfoWindow from ‘vue-baidu-map/components/overlays/InfoWindow’; //标注弹窗

实现的代码如下：

<template>
  <div>
    <div class="mb-10">
      <label>地区：<input v-model="location"/></label>

      <label> 关键词：<input v-model="keyword"/></label>

      <label> 经度：<input v-model="markerPo.lat"/></label>

      <label> 纬度：<input v-model="markerPo.lng"/></label>
    </div>

    <baidu-map
      ak="ocjtpCpd3HusX9VUmkfc49P9jxRV5Vch"
      :scroll-wheel-zoom="true"
      @rightclick="clickBmap"
    >
      <!--地图视图-->

      <bm-view class="map"></bm-view>

      <!--显示更多-->

      <div class="more_panel">
        <span :class="{ down: isShowPanel }" @click.stop="showPanel">
          <span>{{ isShowPanel ? "隐藏" : "显示" }}</span
          >搜索列表<i class="el-icon-d-arrow-right"></i>
        </span>
      </div>

      <!--搜索-->

      <bm-local-search
        :keyword="keyword"
        :panel="isShowPanel"
        :auto-viewport="true"
        :location="location"
        @searchcomplete="searchcomplete"
      ></bm-local-search>

      <!--点标注-->

      <bm-marker
        :position="markerPo"
        :dragging="true"
        :title="storeName"
        :zIndex="999999999"
        @click="infoWindowOpen"
        :icon="{ url: markerIcon, size: { width: 34, height: 34 } }"
        @dragend="dragend"
      >
        <bm-info-window
          :show="isShowInfo"
          @close="infoWindowClose"
          @open="infoWindowOpen"
          >{{ address }}</bm-info-window
        >
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";

import BmView from "vue-baidu-map/components/map/MapView"; //地图视图

import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch"; //搜索

import BmMarker from "vue-baidu-map/components/overlays/Marker"; //点标注

import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow"; //标注弹窗

export default {
  components: {
    BaiduMap,

    BmView,

    BmLocalSearch,

    BmMarker,

    BmInfoWindow,
  },

  data() {
    return {
      storeName: "",

      center: {
        //经纬度

        lng: 39.9,
        lat: 116.3,
      },

      zoom: 3, //地图展示级别
      location: "北京",

      keyword: "北京",

      markerPo: {
        lng: 39.9,
        lat: 116.3,
      },

      isShowPanel: true,

      isShowInfo: false,

      markerIcon: "", //标注图片

      address: "",
    };
  },

  methods: {
    clickBmap(val) {
      //右击鼠标放标注

      this.markerPo = val.point;
    },

    showPanel() {
      //点击标注出现弹框

      this.isShowPanel = !this.isShowPanel;
    },

    infoWindowClose() {
      //弹框关闭

      this.isShowInfo = false;
    },

    infoWindowOpen() {
      //弹框打开

      this.isShowInfo = true;
    },

    dragend(val) {
      //标注拖拽完成获取坐标信息

      this.markerPo = val.point;

      let geocoder = new BMap.Geocoder(); //创建地址解析器的实例

      geocoder.getLocation(val.point, (rs) => {
        this.address = rs.address;
      });
    },

    searchcomplete(arr) {
      this.isShowPanel = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;

  height: 500px;
}

.more_panel {
  text-align: center;

  font-size: 12px;

  color: #2878ff;

  padding-top: 10px;

  span {
    cursor: pointer;

    i {
      transform: rotate(90deg);
    }
  }

  span.down {
    i {
      transform: rotate(-90deg);
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192

其中获取点坐标的信息是废了一点时间，因为只拿到经纬度，想要获取具体街道信息就需要使用

let geocoder= new BMap.Geocoder(); //创建地址解析器的实例

  geocoder.getLocation(val.point,rs=>{

  console.log(val.address)

})
1
2
3
4
5
6
7