如何在项目及 vue 中使用 百度地图

学习目标：

在项目中会使用百度地图，并会适当的添加需要的插件

学习内容：

百度地图在项目中的使用方法及步骤

---

总结：

• 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>

…