学习目标:
在项目中会使用百度地图,并会适当的添加需要的插件
学习内容:
百度地图在项目中的使用方法及步骤
总结:
- 1、在 vue 中如何使用百度地图
首先我们需要插入 百度地图的组件,在该项目下打开 node 命令框,运行如下命令:
$ npm install vue-baidu-map --save
- 2、在项目中使用百度地图时,需要 import 该组件
//百度地图
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
//比例尺
import BmScale from 'vue-baidu-map/components/controls/Scale'
//缩放
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
//百度地图中相关的组件有很多,我们可以根据百度地图的 API 选择自已需要的组件
- 3、在项目中使用百度地图时,import 该组件后,需要 注册 该组件
export default {
name: "baidu-Map",
components: {
BaiduMap,
BmScale,
BmNavigation
},
- 4、在项目 的html 中使用百度地图
- (1)、首先需要你在百度地图官网申请下来的 百度地图 秘钥
- (2)、必须有 baidu-map 标签,与地图相关的 html 的内容写在 该 标签的中间。
<baidu-map>
</ baidu-map>
- (3)、根据自己的需要可以使用不同的控件,并且可以进行 样式的设置。具体使用如下举例:
<baidu-map :style="{width:map.width,height:map.height}" class="map" ak="你的百度地图秘钥" :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}" @ready="handler" :scroll-wheel-zoom="true">
<!--比例尺控件-->
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!--缩放控件-->
<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
<!--聚合动态添加的点坐标-->
<bm-marker-clusterer :averageCenter="true">
<bm-marker v-for="marker of markers" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}" @click="lookDetail(marker)">
</bm-marker>
</bm-marker-clusterer>
</baidu-map>
…