vue调用百度地图API实现点击相应位置切换地图定位
1、需求分析
在页面显示地图，初始状态显示上海市，地图上有特定地点的标注。左侧为建筑（地点）列表，点击某个地点右侧地图定位到其地理位置并显示具体信息。2、实现步骤
在百度地图开放平台申请密钥（ak）
在项目中引入百度地图api
<script type="text/javascript" src="http://api./api?v=2.0&ak=*********(你的ak)"></script>
html页面布局
<el-container ><el-aside style="margin-top:15px"><el-table :data="buildinglist" @row-click="skiptomap" fit highlight-current-row stripe border><el-table-column prop="name" lable="name" align="center"></el-table-column></el-table></el-aside><el-container id="newmap" style="margin-top:20px;margin-left:20px; height:600px;"></el-container></el-container>
左侧为建筑表格，表格数据为js中data里定义的建筑列表，表格只显示一列，即建筑名称，给表格添加了行点击事件skiptomap，在js里通过该事件完成点击后的地图定位。
row-click是elementui中table的行点击事件，返回的参数包括（row, column, event）。
右侧为放置地图的容器，定义其id为newmap。
js中定义数据和方法
数据的定义：
data: {//定义指定地点的名称和经纬度buildinglist: [{name: '上海迪士尼', j: 121.671964, w: 31.148267 },{name: '上海东方明珠', j: 121.506377, w: 31.245105 },{name: '上海环球港', j: 121.419129, w: 31.239446 },{name: '上海图书馆', j: 121.451117, w: 31.213841 },{name: '中山公园', j: 121.425511, w: 31.227831 },{name: '浦东国际机场', j: 121.81509, w: 31.157478 },{name: '虹桥机场', j: 121.334574, w: 31.200171 }],jd: 121.487899486, //初始地图中心点的经纬度wd: 31.24916171,map: {},point: {},},
钩子函数，vue挂载完成后执行：
mounted: function () {this.loadmap(this.jd,this.wd);},
methods中定义加载地图的方法loadmap和点击事件skiptomap：
loadmap(jd, wd) {var _this = this; //保存此时的this值！！！this.map = new BMap.Map("newmap");// 创建地图实例 this.point = new BMap.Point(jd, wd); // 创建点坐标 this.map.centerAndZoom(this.point, 12); // 初始化地图，设置中心点坐标和地图级别 //this.map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放this.buildinglist.forEach(function (item) {//创建多标注var point2 = new BMap.Point(item.j, item.w);var marker = new BMap.Marker(point2); // 创建标注 _this.map.addOverlay(marker);// 将标注添加到地图中 })},
skiptomap(row, event, column) {this.point = new BMap.Point(row.j, row.w);this.map.centerAndZoom(this.point, 14);var infoWindow = new BMap.InfoWindow(row.name); // 创建信息窗口对象this.map.openInfoWindow(infoWindow, this.point); //开启信息窗口},
3、结果展示
因为项目中用到的地图效果略简单，故先实现简单的点击定位功能，关于百度地图api的使用官网文档有很详细的介绍，更多功能可参考文档实现。
