uniapp使用百度地图 (vue 使用 vue-baidu-map)及坐标转换

素颜马尾好姑娘i 2022-09-03 04:16 836阅读 0赞

## 最近有个需求是对GPS的坐标在unaip中展示对坐标转化 ##

因为拿到的是 GPS 坐标 uniapp 的map是腾讯的，但是腾讯的地图转换数据有限制和处理方面是异步，最后考虑用百度地图 。

**需要**

1.  百度地图的key
2.  uniapp 安装 npm包 [官网uniapp 咱装 npm包支持][uniapp _ npm]
3.  了解百度地图 2.0 的参考类 [百度地图参考类 地址][Link 1]

**开始**

1.  若是 uniapp 项目没有使用 npm 管理依赖 ，需要先在项目根目录初始化npm 工程

> 初始化 npm 指令： npm init -y  
> **判断项目是否使用npm管理依赖： 项目的根目录是否含有 package.json 文件**  
> cli 项目的都是含有 package.json 的，但是**HBuilderX创建的项目是默认没有的，需要通过指令来初始化**

1.  安装依赖 百度地图 Vue Baidu Map

> 指令： npm install vue-baidu-map --save  
> vue-baidu-map 是咱需要安装的包的名字

4.在项目引入 Vue Baidu Map  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70]

// 百度地图 调用百度
    import BaiduMap from 'vue-baidu-map'
    Vue.use(BaiduMap, { 
      // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
      ak: 'fSH0tNa******gUWb2I' 
    })

1.  页面调用  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70 1]

<view class="map">
    			
    			<baidu-map @ready="loadedMap" style="width: 750rpx; height:1100rpx;" :center="startposition" :zoom="15" :scroll-wheel-zoom="true">
    
    				
    				<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    				<bm-point-collection :points="polylinePaths" shape=" BMAP_POINT_SHAPE_WATERDROP" color="blue" size="BMAP_POINT_SIZE_BIG"></bm-point-collection>
    				<bm-polyline :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="4">
    
    				</bm-polyline>
    				
    			</baidu-map>
    		</view>

js部分:  
**注意：** data内要有 百度地图内定义的参数

export default { 
    		data() { 
    			return { 
    				startposition: { 
    					lng: 116.404,
    					lat: 39.915
    				},
    				polylinePaths: [{ 
    						lng: 116.404,
    						lat: 39.915
    					},
    					{ 
    						lng: 116.405,
    						lat: 39.920
    					},
    					{ 
    						lng: 116.423493,
    						lat: 39.907445
    					},
    				],
    				polylinePath: [{ 
    						lng: 116.404,
    						lat: 39.915
    					},
    					{ 
    						lng: 116.405,
    						lat: 39.920
    					},
    					{ 
    						lng: 116.423493,
    						lat: 39.907445
    					},
    				], // 地图数据
    				lineCode: '',
    				items: ['地图'],
    				buttonIndex: 0,
    				scale: 16, //地图缩放比例
    				}
    					}
    					}

**vue-baidu-map 百度地图参考文档**[Vue Baidu Map 文档][Vue Baidu Map]

1.  经纬度坐标转换

> 因为接口返回的经纬度是 CPS 实际的经纬度，百度地图是百度自己的经纬度  
> 需要对获取的经纬度进行处理，转化为百度的经纬度

*  注意： 我这里 的是百度2.0的 [百度2.0 官方文档][2.0]
 *  百度转化经纬度 核心方法

> convertor.translate(pointArr, 1, 5, translateCallbackAddStation);

*  代码：

1.  这里的 BMap类需要从 <baidu-map @ready=“loadedMap” > 的 ready的事件中获取  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70 2]
2.

// 初始化地图
    			loadedMap({ BMap, map }) { 
    				//创建地址解析器实例
    				console.log(BMap, map, BMap.Convertor, "初始地图实例");
    				this.sendLinePiontsRequest(BMap)  // 这个是获取线路的方法
    				window.NNN = { 
    					BMap,
    					map
    				}
    				convertor = new BMap.Convertor() // convertor 是一个全局的变量
    			},

获取线路的方法

//获取线路 点数据
    			async sendLinePiontsRequest(BMap) { 
    				let lineCode = this.lineCode
    				uni.showLoading({ 
    				     title: '正在加载',
    				     mask: true
    				})
    				console.log("LinePiont获取lineCode: ", lineCode)
    				let points = []
    
    				request({ 
    					contentType: 'application/json;charset=UTF-8',
    					method: 'get',
    					url: 'hyframe-webapp/phoneQuery/getLineStation?lineCode=' + lineCode,
    					success: (res) => { 
    						uni.hideLoading();
    						points = res
    						let stationList = []
    						console.log(res, "线路数据");
    						let pointArr = [];
    						for (let i = 0; i < res.stationList.length; i++) { 
    
    							if (res.stationList[i].sxx == 0) { 
    
    							// 坐标转化
    								let point = new BMap.Point(res.stationList[i].lon * 1, res.stationList[i]
    									.lat * 1)
    
    								pointArr.push(point)
    
    							}
    						}
    						// 回调 translateCallbackAddStation方法这个方法会获取到对应的转换后的百度坐标
    						convertor.translate(pointArr, 1, 5, translateCallbackAddStation);
    					
    					},
    					fail: (err) => { 
    						uni.hideLoading();
    					}
    				})
    			},
    			// 处理坐标的方法
    		translateCallbackAddStation(point) { 
    				console.log(point);
    
    				this.polylinePaths = point.points
    				console.log(this.polylinePaths);
    				this.startposition = point.points[0]
    				this.getLineInflectionPoint()
    			},

> **核心处理：**

let pointArr = [];
    						for (let i = 0; i < res.stationList.length; i++) { 
    						
    							if (res.stationList[i].sxx == 0) { 
    
    
    								let point = new BMap.Point(res.stationList[i].lon * 1, res.stationList[i]
    									.lat * 1)
    
    								pointArr.push(point)
    
    							}
    						}
    
    						convertor.translate(pointArr, 1, 5, translateCallbackAddStation);

*  思路再于 通过 **BMap.convertor.translate**进行转换
 *  **Convertor**

> 用于将其他坐标系的坐标转换为百度坐标。

<table> 
 <thead> 
  <tr> 
   <th>构造函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Convertor()</td> 
   <td>创建一个坐标转换的实例</td> 
  </tr> 
  <tr> 
   <td>–</td> 
   <td>–</td> 
  </tr> 
  <tr> 
   <td>方法</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>translate(points: Array&lt;BMap.Point&gt;, from: number, to: number, callback: function)</td> 
   <td>对指定的点数组进行坐标转换，转换规则为从from到to，转换完成后调用callback，callback的参数为Object 。一次最多10个点，from和to的含义请参照Web服务API</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70 3]

[uniapp _ npm]: https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81
[Link 1]: https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70]: /images/20220829/61e8504b4a6d454e815d1c6fbe49a97d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70 1]: /images/20220829/052b8685d1e04e3ba01e7ae172812787.png
[Vue Baidu Map]: https://dafrok.github.io/vue-baidu-map/#/zh/overlay/polyline
[2.0]: https://dafrok.github.io/vue-baidu-map/#/zh/search/walking
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70 2]: /images/20220829/005c1af2f7e3476eab0eba2af39140c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70 3]: /images/20220829/d6583ac9cb2b45adbd8a90e52884194d.png