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

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

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

需要

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

开始

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

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

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

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

4.在项目引入 Vue Baidu Map

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

5. 页面调用
   

<!-- 展示地图 -->
		<view  class="map">
			<!-- <busmap :lineCode="lineCode" ></busmap> -->
			<baidu-map @ready="loadedMap" style="width: 750rpx; height:1100rpx;" :center="startposition" :zoom="15"
				:scroll-wheel-zoom="true">

				<!-- <bm-marker :position="startposition"  animation="BMAP_ANIMATION_BOUNCE"> -->
				<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>
				<!-- </bm-marker> -->
			</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 文档

7. 经纬度坐标转换

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

• 注意： 我这里 的是百度2.0的 百度2.0 官方文档

• 百度转化经纬度 核心方法

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

• 代码：

1. 这里的 BMap类需要从 <baidu-map @ready=“loadedMap” > 的 ready的事件中获取
   

// 初始化地图
			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

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

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