uniapp使用百度地图(vue使用vuebaidumap)及坐标转换

最近有个需求是对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">

<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 文档

7. 经纬度坐标转换

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

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

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

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

• 代码：

1. 这里的 BMap类需要从 的 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

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