vue调用百度地图API实现点击相应位置切换地图定位

vue调用百度地图API实现点击相应位置切换地图定位

1、需求分析

1. 在页面显示地图，初始状态显示上海市，地图上有特定地点的标注。
2. 左侧为建筑（地点）列表，点击某个地点右侧地图定位到其地理位置并显示具体信息。

2、实现步骤

1. 在百度地图开放平台申请密钥（ak）
   

2. 在项目中引入百度地图api

   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=*********(你的ak)">script>
   

3. 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。

4. 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的使用官网文档有很详细的介绍，更多功能可参考文档实现。