在html中加入需要导航的地图列表,这里我们主要以高德和百度为例
<view>
<el-button @click="onGotoBaidu">百度地图</el-button>
<el-button @click="onGotoGaode">高德地图</el-button>
<el-button @click="onGotoClose">取消</el-button>
</div>
js代码中将当前坐标转为符合不同厂商的地图坐标规范
onGotoBaidu: function(){
const elink = document.createElement('a');
//将坐标转为高德坐标
let position = this.changeTianToBaidu(this.form.longitude, this.form.latitude)
//判断手机类型
var u = navigator.userAgent;
// var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
// if (isAndroid) {
// elink.href = 'bdapp://map/direction?origin=' + '&destination=name:|latlng:' + position[1] + ',' +
// position[0] +
// '&coord_type=bd09ll&mode=transit&sy=3&index=0&target=1&src=andr.baidu.openAPIdemo'
// } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
// elink.href = 'baidumap://map/direction?origin=&destination=' + position[1] + ',' + position[0] +
// '&coord_type=bd09ll&mode=driving&src=ios.baidu.openAPIdemo'
// }
elink.href = 'http://api.map.baidu.com/marker?location=' + position[1] + ',' + position[0] + '&title=风险点&content=终点&output=html&src=webapp.baidu.openAPIdemo';
elink.style.display = 'none';
// elink.onclick = this.checkApp(elink.href);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
},
onGotoGaode: function(){
const elink = document.createElement('a');
//将坐标转为高德坐标
let position = this.changeTianToGaode(this.form.longitude, this.form.latitude)
//判断手机类型
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = /\(iPad/i.test(u);//ios终端
elink.href = 'https://uri.amap.com/navigation?from=&to='+ position[0] +','+position[1]+',' + this.form.name + '&callnative=1';
elink.style.display = 'none';
elink.onclick = this.checkApp(elink.href);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
},
//将天地图的坐标转为百度坐标
changeTianToBaidu(lng, lat){
var result = gcoord.transform(
[lng, lat], // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.BD09 // 目标坐标系
);
return result;
},
//将天地图的坐标转为高德坐标
changeTianToGaode(lng, lat){
var result = gcoord.transform(
[lng, lat], // 经纬度坐标
gcoord.WGS84, // 当前坐标系
gcoord.GCJ02 // 目标坐标系
);
return result;
},