H5方式
因为h5是手机端的网页,所以可以通过window.open(url)的方式打开一个地址,同时携带上终点地址进行导航
// 地图类型 {经纬度} 地址
getMapApp(mapType, location, address) {
const { lat, lng } = location;
let url = '';
switch (mapType) {
case '腾讯地图':
url =
'https://apis.map.qq.com/uri/v1/marker?marker=coord:' +
lat +
',' +
lng +
';addr:' +
address +
';title:地址&referer=keyfree';
break;
case '高德地图':
url =
'https://uri.amap.com/marker?position=' +
lng +
',' +
lat +
'&name=' +
address +
'&callnative=1';
break;
case '百度地图':
url =
'http://api.map.baidu.com/marker?location=' +
lat +
',' +
lng +
'&title=地址&content=' +
address +
'&output=html&src=webapp.reformer.appname&coord_type=gcj02';
break;
default:
break;
}
return url;
}
// 通过window.open的方式打开页面
window.open(this.getMapApp('高德地图',{lat:'37.73605',lng:'112.56566'},'怡和广场'))
App方式
app需要判断是否是手机端,再判断用户手机上有没有这个app,没有的话进行提示,有的话再打开app,同时通过终点地址和经纬度,开启从用户的位置到终点的导航
// 通过选中哪个地图来进行操作 1为高德 0为百度
// 传参 对象形式 {lat: 纬度,lng: 经度, add: 地址}
onSelect(index) {
// console.log(index)
this.navgatorshow = false;
if (!plus) return;
if (index) {
if (plus.runtime.isApplicationExist({ pname: 'com.autonavi.minimap' })) {
//判断本机是否存在该应用
this.Gaode({ lat: '37.73605', lng: '112.56566', add: '怡和广场' });
} else {
this.$toast('请安装地图后再使用');
}
} else {
if (plus.runtime.isApplicationExist({ pname: 'com.baidu.BaiduMap' })) {
this.Baidu({ lat: '37.73605', lng: '112.56566', add: '怡和广场' });
} else {
this.$toast('请安装地图后再使用');
}
}
},
Gaode(options) {
let { lat, lng, add } = options; //终点的纬度,终点的经度,终点的名称
let url = `amapuri://route/plan/?sid=BGVIS1&slat=&slon=&sname=&did=BGVIS2&dlat=${lat}&dlon=${lng}&dname=${add}&dev=1&t=0`;
plus.runtime.openURL(url);
},
Baidu(options) {
let { lat, lng, add } = options; //终点的纬度,终点的经度,终点的名称
let url = `bdapp://map/direction?origin=&destination=name:${add}|latlng:${lat},${lng}&coord_type=wgs84&mode=driving&src=andr.baidu.openAPIdemo`;
plus.runtime.openURL(url);
},