如何在项目中使用百度地图，百度地图在项目中的控件

学习目标：

百度在项目中的控件

学习内容：

如何在项目中使用百度地图，百度地图在项目中的控件

总结：

• 1、引入百度地图组件

   <baidu-map style="width=1000px;height=500px" class="map" ak="rVyqD8kKGyW6h5KgcPXPasziB5zLsmdo" :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}"
                        @ready="handler" :scroll-wheel-zoom="true">
       //控件的使用
                    </baidu-map>

• 2、比例尺控件

        <!--比例尺控件-->
       <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
       

• 3、缩放控件

        <!--缩放控件-->
        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
                      

• 4、聚合动态添加的点坐标

  <!--聚合动态添加的点坐标-->
  <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>
                 

• 5、全景

   <bm-panorama anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-panorama>   <!-- 全景 -->

• 6、开启测距

 - <bm-control><button @click="openDistanceTool">开启测距</button></bm-control>

• 7、地图类型

<!-- 地图类型-->
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>

• 8、定位

 <!-- 定位   -->
  <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>

• 9、版权信息的标注

<!-- 版权信息的标注方式  -->
<bm-copyright
      anchor="BMAP_ANCHOR_TOP_RIGHT"
      :copyright="[{id: 1, content: 'Copyright Message', bounds: {ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}}}, {id: 2,      content: '<a>版权信息的详细内容</a>'}]">
    </bm-copyright>

• 10、切换城市的控件

 <!--  添加切换城市控件  -->
 <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>

以上都是 百度地图 为我们提供的可以直接使用的控件，如果这些控件还是没有满足我们在项目中的需求时，我们可以 自定义控件，自己根据实际需求定义一个控件。