跳转到第三方地图

最新推荐文章于 2023-07-31 12:01:16 发布
最新推荐文章于 2023-07-31 12:01:16 发布
阅读量573 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40280730/article/details/115906589
版权 
/*
	文件说明： openMap.js 
	 
	js文件是打开手机自带的地图, 默认的三个地图, 百度， 高德， 腾讯
	
	plus.runtime.isApplicationExist ------》 检测手机是否安装 地图软件
	
	openMapByAndroid()， openMapByIos  通过url方式调用第三方导航， 分为安卓， IOS
	
	点击开始导航， 软件下方会提示用户选择导航， 默认显示的是系统中安装的第三方导航，比如： 手机上安装的是高德， 只会提示高德地图，
	如果没有高德和百度， 会提示腾讯地图，腾讯地图是网页版的！
	
	首先判断系统是否安装地图软件， 没有安装会提示用户下载， 
	
	如果安装会自动调动第三方的导航软件， 进行导航
	
	
	使用说明：
	
	1. 在组件中 映入文件， 例如： import  Map from '文件的路径'
	
	2. 在组建中使用 MAP.openMap(lat, lng, name) 纬度， 经度， 名称
	
	3. openMap 是文件中暴露出去的方法
	
*/

let itemList = ["百度地图", "高德地图", "腾讯地图"];
// #ifdef APP-PLUS
var isBaidu = plus.runtime.isApplicationExist({
	pname: 'com.baidu.BaiduMap',
	action: 'baidumap://'
});
var isGaode = plus.runtime.isApplicationExist({
	pname: 'com.autonavi.minimap',
	action: 'iosamap://'
});
itemList = ["腾讯地图"];
if (isBaidu && isGaode) {
	itemList = ["百度地图", "高德地图"];
}
if (!isBaidu && isGaode) {
	itemList = ["高德地图"];
}
if (isBaidu && !isGaode) {
	itemList = ["百度地图"];
}
// #endif

function openMapByDefault(latitude, longitude, name) {
	uni.openLocation({
		latitude: latitude,
		longitude: longitude,
		name: name,
		address: "",
		fail: (err) => {
			console.log(err)
		},
	})
}

function openMapByAndroid(latitude, longitude, name) {
	let url = ''; // 回调地址
	let downloadUrl = ''; // 回调地址
	uni.showActionSheet({
		itemList: itemList,
		success: (res) => {
			var bdapp = "bdapp://map/direction?destination=name:" + name + "|latlng:" + latitude + "," + longitude +
				"&coord_type=bd09ll&src=hxbank";
			var bdappDown = "http://map.baidu.com/zt/qudao/newfengchao/1012337a/html/slide.html"
			var amapuri = "amapuri://route/plan/?sourceApplication=hxbank&dlat=" + latitude + "&dlon=" + longitude +
				"&dname=" + name + "&dev=0";
			var amapuriDown = "http://wap.amap.com/"
			// #ifdef APP-PLUS
			if (isBaidu && isGaode) {
				if (res.tapIndex == 0) {
					url = bdapp;
					downloadUrl = bdappDown
					openURL(url, downloadUrl)
				} else if (res.tapIndex == 1) {
					url = amapuri;
					downloadUrl = amapuriDown
					getGaoDeLocation(latitude, longitude, (location) => {
						url = "amapuri://route/plan/?sourceApplication=hxbank&dlat=" + location.lat + "&dlon=" + location.lng +
				"&dname=" + name + "&dev=0"
						openURL(url, downloadUrl)
					})
				}
			} else if (!isBaidu && isGaode) {
				if (res.tapIndex == 0) {
					// bMapTransqqMap(latitude,longitude)
					// var amapuri = "amapuri://route/plan/?sourceApplication=hxbank&dlat=" + obj.latitude + "&dlon=" + obj.longitude +
					// 	"&dname=" + name + "&dev=1";
					// var amapuriDown = "http://wap.amap.com/"
					url = amapuri;
					downloadUrl = amapuriDown
					getGaoDeLocation(latitude, longitude, (location) => {
							url = "amapuri://route/plan/?sourceApplication=hxbank&dlat=" + location.lat + "&dlon=" + location.lng +
					"&dname=" + name + "&dev=0"
							openURL(url, downloadUrl)
						})
				}
			} else if (isBaidu && !isGaode) {
				if (res.tapIndex == 0) {
					url = bdapp;
					downloadUrl = bdappDown
					openURL(url, downloadUrl)
				}
			} else {
				openMapByDefault(latitude, longitude, name)
			}
			// #endif
			// #ifndef APP-PLUS
			if (res.tapIndex == 0) {
				url = bdapp;
				downloadUrl = bdappDown
				openURL(url, downloadUrl)
			} else if (res.tapIndex == 1) {
				url = amapuri;
				downloadUrl = amapuriDown
				openURL(url, downloadUrl)
			} else {
				url = "qqmap://map/routeplan?type=drive&to=" + name + "&tocoord=" + latitude + "," + longitude + ""
				openURLTencent(url, latitude, longitude, name)
			}
			// #endif

		}
	})
}

function openMapByIos(latitude, longitude, name) {
	let url = ''; // 回调地址
	let downloadUrl = ''; // 回调地址
	uni.showActionSheet({
		itemList: itemList,
		success: (res) => {
			var bdapp = "baidumap://map/direction?destination=name:" + name + "|latlng:" + latitude + "," + longitude +
				"&coord_type=bd09ll&src=hxban";
			var bdappDown = "http://map.baidu.com/zt/qudao/newfengchao/1012337a/html/slide.html";
			var amapuri = "iosamap://route/plan/?sourceApplication=hxbank&dlat=" + latitude + "&dlon=" + longitude +
				"&dname=" + name + "&dev=0";
			var amapuriDown = "http://wap.amap.com/"
			// #ifdef APP-PLUS
			if (isBaidu && isGaode) {
				if (res.tapIndex == 0) {
					url = bdapp;
					downloadUrl = bdappDown
					openURL(url, downloadUrl)
				} else if (res.tapIndex == 1) {
					url = amapuri
					downloadUrl = amapuriDown
					getGaoDeLocation(latitude, longitude, (location) => {
						url = "iosamap://route/plan/?sourceApplication=hxbank&dlat=" + location.lat + "&dlon=" + location.lng +
							"&dname=" + name + "&dev=0";
						openURL(url, downloadUrl)
					})
				}
			} else if (!isBaidu && isGaode) {
				if (res.tapIndex == 0) {
					url = amapuri
					downloadUrl = amapuriDown
					getGaoDeLocation(latitude, longitude, (location) => {
						url = "iosamap://route/plan/?sourceApplication=hxbank&dlat=" + location.lat + "&dlon=" + location.lng +
							"&dname=" + name + "&dev=0";
						openURL(url, downloadUrl)
					})
				}
			} else if (isBaidu && !isGaode) {
				if (res.tapIndex == 0) {
					console.log(3)
					url = bdapp;
					downloadUrl = bdappDown
					openURL(url, downloadUrl)
				}
			} else {
				openMapByDefault(latitude, longitude, name)
			}
			// #endif
			// #ifndef APP-PLUS
			if (res.tapIndex == 0) {
				url = bdapp;
				downloadUrl = bdappDown
				openURL(url, downloadUrl)
			} else if (res.tapIndex == 1) {
				url = amapuri
				downloadUrl = amapuriDown
				openURL(url, downloadUrl)
			} else {
				url = "qqmap://map/routeplan?type=drive&to=" + name + "&tocoord=" + latitude + "," + longitude + ""
				openURLTencent(url, latitude, longitude, name)
			}
			// #endif

		}
	})
}

function getGaoDeLocation (lat, lng, success) {
	var X_PI = Math.PI * 3000.0 / 180.0;
	var x = lng- 0.0065, y = lat- 0.006;
	var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
	var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
	var bd_lng = z * Math.cos(theta);
	var bd_lat = z * Math.sin(theta);
	success({lng: bd_lng, lat: bd_lat})
}

function request (url, data, success) {
	var method = 'get'
	uni.request ({
		url: url,
		data,
		timeout: 3000,
		method,
		success: (res) => {
			console.log(res)
			if (res.statusCode === 200) {
				if (success) success(res.data)
			} else if (res.statusCode == 405) { 
				 uni.showToast({
					icon: 'none',
					title: '请求方法错误',
					duration: 1500
				})
			} else if (res.statusCode == 401) {
				uni.showToast({
					icon: 'none',
					title: '未登录或登录状态已超时',
					duration: 1500
				})
				setTimeout(() => {
					uni.reLaunch({
							url: '/pages/index/index.vue',
					})
				}, 1500)
			} else {
				uni.showToast({
					icon: 'none',
					title: '请求错误:' + res.statusCode,
					duration: 1500
				})
			}
		},
		fail: (res) => {
			uni.showToast({
				title: '网络请求失败',
				icon: 'none'
			})
			if (fail) fail(res)
		}
	})
}

function openURL(url, downLoadUrl) {
	url = encodeURI(url)
	// #ifdef APP-PLUS
	plus.runtime.openURL(url);
	// #endif
	// #ifndef APP-PLUS
	window.location.href = url;
	var startTime = Date.now();
	var count = 0;
	var endTime = 0;
	var t = setInterval(function() {
		count += 1;
		endTime = Date.now() - startTime;
		if (endTime > 800) {
			clearInterval(t);
		}
		if (count < 40) {
			return false;
		}
		if (!(document.hidden || document.webkitHidden)) {
			window.location.href = downLoadUrl;

		}
	}, 20);
	// #endif

}

function openURLTencent(url, latitude, longitude, name) {
	// #ifdef APP-PLUS
	plus.runtime.openURL(url);
	// #endif
	// #ifndef APP-PLUS
	window.location.href = url;
	// #endif
	var startTime = Date.now();
	var count = 0;
	var endTime = 0;
	var t = setInterval(function() {
		count += 1;
		endTime = Date.now() - startTime;
		if (endTime > 800) {
			clearInterval(t);
		}
		if (count < 40) {
			return false;
		}
		if (!(document.hidden || document.webkitHidden)) {
			openMapByDefault(latitude, longitude, name)
		}
	}, 20);
}
export default {
	/* 打开地图 */
	openMap(latitude, longitude, name) {
		// #ifdef MP-WEIXIN
		wx.openLocation({
			latitude: latitude,
			longitude: longitude,
			name: name,
			fail: (err) => {
				console.log(err)
			},
		})
		// #endif
		// #ifndef MP
		switch (uni.getSystemInfoSync().platform) {
			case 'android':
				console.log('运行Android上')
				openMapByAndroid(latitude, longitude, name)
				break;
			case 'ios':
				console.log('运行iOS上')
				openMapByIos(latitude, longitude, name, )
				break;
			default:
				openMapByDefault(latitude, longitude, name)
				console.log('运行在开发者工具上')
				break;
		}

		// #endif

	}
}

页面引用：

	...
	import MAP from '@/static/mapJs/openMap.js'
	...
	MAP.openMap(item.address.lat, item.address.lng, item.schoolName)
码农小权权
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
app内打开第三方地图进行导航iOS
01-04
app内打开第三方地图进行导航iOS移动前段
OpenLayers源码解析1 Map.js
qq_45005996的博客
08-20 1110
Map.js 父类：./PluggableMap/PluggableMap 引用：5个模块 ./renderer/Composite.js ./PluggableMap.js ./obj.js ./control.js（控件） ./interaction.js（交互） 主要功能：核心组件，渲染地图 必要参数： view layers target controls和interactions要是未指定，使用默认值 方法：createRenderer()？ /** * @module ol/Map */ i
微信小程序内 打开地图APP 选择导航
weixin_45940369的博客
05-10 1622
微信小程序内 打开地图APP 选择导航，是使用了MapContext.openMapApp 接口实现的。
小程序 · map地图
weixin_42091247的博客
09-10 205
报错：openLocation:fail parameter error: parameter.latitude should be Number instead of Undefined 解决： latitude、longitude:Number必须是数字类型，后端返回的数据类型是string。所以需要转换下数据类型 wx.openLocation({ latitude:Number(orderLatitude), longitude:Number(orderLongitude), scale
微信小程序实现调用导航App进行导航
qq_41429765的博客
10-15 2024
使用微信小程序的api
UniApp -APP端map组件标注点调用第三方地图导航
weixin_44252579的博客
08-05 2647
第一次写，，， 1、适用于安卓or ios（app端，小程序没测试） 2、注意点： map组件的@markertap事件，并且markers里面的每一项必须要有id，用于区分标注的点和性能优化 3、代码块 @markertap这个事件可以拿到market的id，与标注点数组的id相比较就可以拿到标注点的经纬度，至于怎么用可以看文档 //调用打开地图（需经度纬度和地址名称，地址名称是为了地图展示搜索） //经度纬度必须要，地图会根据这个进行定位导航 this.toMapAPP(lat...
android 跳转第三方地图（百度，高德）
qq_32306959的博客
06-10 2466
第三方地图（百度，高德）
史上最全第三方地图服务汇总【天地图/高德/百度/腾讯/谷歌地图等】
顽劣的石头——www.gisgogo.cn
05-16 6340
Webgis开发过程中，我们一般使用第三方地图服务作为底图。本篇博文给大家介绍市面上常用的第三方地图服务，应该算的上是史上最全。如果需要转账，请注明转载出处： 1. 天地图 矢量图 地图 http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk= 标注 http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}
H5唤起高德、百度、腾讯地图导航
最新发布
前端阿皓
07-31 7401
🚀 本篇主要讲解在H5中如何唤起高德、百度、腾讯地图导航。
web页面调起地图APP(高德地图、百度地图、腾讯地图)
梦翼横空的专栏
03-11 9246
web页面调起地图APP(高德地图、百度地图、腾讯地图) 在没有安装APP的情况下可以用web端地图
Android仿微信调用第三方地图app导航（腾讯、高德、百度）
09-29
Android仿微信调用第三方地图app导航（腾讯、高德、百度），博文请参考http://blog.csdn.net/yissan
Android实现跳转第三方地图导航（百度、高德）
01-03
很多项目需求都是需要你实现地址导航功能，如果没有硬性要求，可以直接跳转到第三方无疑是最方便的，接下来就讲讲如何实现第三方地图导航的跳转 1.首先判断设备是否安装百度和高德地图 判断方式如下 /** * 判断...
uni-app 支持多端第三方地图定位的方法
11-30
该方法支持跳转第三方地图并定位指定坐标。 APP端跳转至百度地图（第三方软件）；若无，则跳转至高德地图（第三方软件）；若均无，则打开腾讯地图（uni自带方法：uni.openLocation） 其它端打开腾讯地图（uni自带...
reactnative调用第三方地图插件进行导航兼容android和ios
08-10
react-native-map-linking：跳转第三方地图应用进行导航，android支持(高德地图、百度地图、腾讯地图)，ios支持(高德地图、百度地图、腾讯地图、Apple地图)
android判断手机是否安装地图应用实现跳转到该地图应用
01-05
现在很多应用都会用到地图，但是我们肯定不想自己的app中还要弄个导航神马的，所以第三方的地图也为我们开辟了一条捷径，直接将数据传输到地图应用，让第三方的地图帮我们来做好这一切。现在比较流行的地图应用百度...
支付宝小程序和微信小程序里打开地图APP
stupid_muscleman的博客
01-05 602
uni-app判断是支付宝小程序还是微信小程序，分别使用各自的API打开地图APP
第三方在线地图源有哪些？
z793837435的博客
07-15 2922
必应地图（bing）http//cn.bing.com/maps包含卫星影像、电子地图、地形图包含卫星影像、电子地图、地形图。ArcgisOnlinehttps//livingatlas.arcgis.com/wayback包含卫星影像、电子地图、地形图。mapboxhttps//www.mapbox.com/contribute/含卫星影像、电子地图。天地图http//map.tianditu.gov.cn包含卫星影像、电子地图、地形图。...
js室内地图开发_我开发的开源 JS 地图引擎 maptalks.js, 请大家不吝赐教!
weixin_34327476的博客
12-23 1156
嗨! 今天总算把 maptalks 的示例与文档整理得七七八八, 打算正式发布了.算一算, 从写下 maptalks 的第一行代码到现在, 已经在这个开源库上花了 4 年时间.我是个自由职业者, 4 年前因为接了个地图外包项目, 因缘际会开始自己造轮子写引擎, 没想到一写就是 4 年 : P项目地址是:项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发:二三维一体化...
android跳转第三方地图,uni-app 跳转第三方地图定位
06-06
要在 Android 上实现跳转到第三方地图，可以使用 Intent，例如： ```java String uri = "geo:" + latitude + "," + longitude + "?q=" + label; Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(uri)); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值