1、引入百度组件
-
main.js 引入百度组件
//引入百度地图 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'your AK' })
-
页面引入
<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>
-
地图效果
2、百度组件属性
法 说明 map.setZoom(15) 设置地图级别 ap.getZoom() 获取地图级别 ap.setCenter(point坐标 | 城市名) 设置地图中心点 ap.getCenter() 获取地图中心点 ap.setMinZoom() 设置地图最小缩放级别 map.setMaxZoom() 设置地图最大缩放级别