手机H5页面打开地图&APP打开第三方地图

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);
},

猜你喜欢

转载自blog.csdn.net/weixin_52615140/article/details/128305963