Vue使用百度地图

1、引入百度组件

1. main.js 引入百度组件

   //引入百度地图
   import BaiduMap from 'vue-baidu-map'
   Vue.use(BaiduMap, {
   	ak: 'your AK'
   })
   

2. 页面引入

   <template>
   	<baidu-map :center="center" :zoom="zoom" @ready="handler" style="width: 800px;height:800px;">
   	</baidu-map>
   </template>
   
   <script>
   	export default {
   		name: 'Map',
   		data() {
   			return {
   				map: null,
   				center: {
   					lng: 116.404,
   					lat: 39.915
   				},
   				zoom: 15
   			}
   		},
   		methods: {
   			handler({
   				BMap,
   				map
   			}) {
   				this.map = map //把map赋值给变量map
   				this.map.centerAndZoom(new BMap.Point(116.3972282409668, 39.90960456049752), 10) //修改中心点，缩放比例
   				this.map.enableScrollWheelZoom(true)//添加鼠标滚动，地图缩放组件
   			}
   		}
   	}
   </script>
   

3. 地图效果
   

   2、百度组件属性

   法	说明
   map.setZoom(15)	设置地图级别
   ap.getZoom()	获取地图级别
   ap.setCenter(point坐标 | 城市名)	设置地图中心点
   ap.getCenter()	获取地图中心点
   ap.setMinZoom()	设置地图最小缩放级别
   map.setMaxZoom()	设置地图最大缩放级别