学习目标:
百度在项目中的控件
学习内容:
如何在项目中使用百度地图,百度地图在项目中的控件
总结:
- 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>
以上都是 百度地图 为我们提供的可以直接使用的控件,如果这些控件还是没有满足我们在项目中的需求时,我们可以 自定义控件,自己根据实际需求定义一个控件。