如何在H5中调用百度地图APP和高德地图APP

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在H5中调用百度地图APP和高德地图APP相关的知识,希望对你有一定的参考价值。

刚说错,是如何唤起???而不是调用~

看官方文档啊亲
具体例子如下
<a href="bdapp://map/navi?query=齐鲁软件园">安卓,百度驾车导航</a>
<a href="androidamap://navi?sourceApplication=appname&poiname=fangheng&lat=36.678528&lon=117.140208&dev=1&">安卓,高德驾车导航</a>
<a href="baidumap://map/navi?query=齐鲁软件园">ios,百度驾车导航</a>
<a href="iosamap://navi?sourceApplication=appname&poiname=fangheng&lat=36.678528&lon=117.140208&dev=1&">ios,高德驾车导航</a>
安卓中,参数query和location二选一
在移动端浏览器是这样使用,如果要在app中使用是需要客户端支持的
参考技术A

1、这里以驾车路线规划为例,加载Driving插件,创建Driving对象,同时设置驾车策略为最短时间:

AMap.plugin(["AMap.Driving"], function()

            var drivingOption =

               policy:AMap.DrivingPolicy.LEAST_TIME,

               map:map
;

            var driving = new AMap.Driving(drivingOption); //构造驾车导航类

       );

2、Driving对象创建完毕之后,只需要在需要的地方调用searchOnAMAP方法就可以了,下面代码中是在button的点击事件中调用的。

//根据起终点坐标规划驾车路线

        driving.search(

           [keyword:'北京站',keyword:'北京大学'],

            function(status,result)

               button.onclick = function()

                   driving.searchOnAMAP(

                       origin:result.origin,

                       destination:result.destination

                   );

                

           );

3、然后就完成了。

参考技术B 试试wx.openLocation 参考技术C 把需要发送的先用地图软件打开选择发送给别人/分享,然后选微信,找到想要发的人/群,发送…
现在不让往微信里关联app了…

官方回复在安卓iOS中从app内通过androidamap://等协议唤醒手机上的高德地图app进行导航,高德平台会收费吗?高德地图URI API调用(安卓ios端)是否免费 - 商用5W一年

答案

免费

 

详情

1)APP内使用高德地图SDK进行导航、规划是需要商用收费的,5w每年;

2)APP内使用androidamap://等协议启动-唤醒手机上的高德地图进行导航,是免费

缺点:再也不能从高德获取到任何的路线规划、距离计算数据了....有钱人除外....

优点:起码还能让客户自己到高德、百度app进行导航....

工单

工单类型: 功能咨询(方法或接口使用咨询、错误码解疑、功能建议等)
工单标题: 请问高德地图URI API调用(安卓、ios端)是否免费?
工单描述: 安卓、iOS中从app内通过androidamap://跳转到外部高德地图app,高德平台会收费吗? 1.在APP内部使用高德SDK展示地图、计算路程等需要收费,是明确的。 2.在安卓、iOS中从app内通过androidamap://等协议唤醒手机上的高德地图app进行导航,高德平台会收费吗?
请求串: iosamap://poi?sourceApplication=sourceApplication&amp;name=地址

您好,高德开放平台很高兴为您服务,安卓和iOS已封装的基础服务是不限制配额的,您可以放心使用。
如您的问题得到解决,拜托您给个满意哦~~~
您的满意是我们永远的追求。

uniapp上唤醒手机百度、高德地图APP进行地址搜索的方法 (搜索目的地)

vue文件的scriptmethods里面定义方法

// 打开第三方地图APP进行导航 - 地址解析
			
			// 腾讯地图 强制要求带开发者Key,抛弃
			// https://lbs.qq.com/webApi/uriV1/uriGuide/uriMobileRoute
			
			// 高德
			// https://lbs.amap.com/api/amap-mobile/guide/ios/search
			
			// 百度
			// https://lbsyun.baidu.com/index.php?title=uri/api/android#service-page-anchor9
			
			toMapAPP(address)
				let url = "";
				if (plus.os.name == "Android") 	// 判断是安卓端
					plus.nativeUI.actionSheet(	// 选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [title: "百度地图", title: "高德地图"]
					, function(e) 
						switch (e.index) 
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							
							case 1:
								url = `baidumap://map/geocoder?src=andr.baidu.openAPIdemo&address=`+address
								
								break;
							case 2:
								url = `androidamap://keywordNavi?sourceApplication=softname&style=2&keyword=`+address;
								break;
								
							default:
								break;
						
						if (url != "") 
							console.log('[url] '+url)
							url = encodeURI(url);
							console.log('[url-encodeURI] '+url)
							//plus.runtime.openURL(url,function(e))调起手机APP应用
							plus.runtime.openURL(url, function(e) 
								plus.nativeUI.alert("本机未安装指定的地图应用");
							);
						
					)
				 else 
					// iOS上获取本机是否安装了百度高德地图,需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//(如urlschemewhitelist:["iosamap","baidumap"])  
					plus.nativeUI.actionSheet(
						title: "选择地图应用",
						cancel: "取消",
						buttons: [title: "百度地图", title: "高德地图"]
					, function(e) 
						switch (e.index) 
							case 1:
								url = `baidumap://map/geocoder?src=ios.baidu.openAPIdemo&address=`+address
								break;
							case 2:
								url = `iosamap://poi?sourceApplication=applicationName&name=$name`;
								break;
							default:
								break;
						
						if (url != "") 
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) 
								plus.nativeUI.alert("本机未安装指定的地图应用");
							);
						
					)
				
			,

 

以上是关于如何在H5中调用百度地图APP和高德地图APP的主要内容,如果未能解决你的问题,请参考以下文章

ReactNative 调用手机地图(高德百度)导航 Android

关于App打开高德和百度地图导航的代码

如何在H5页面里调用手机导航?

uniapp上高德(百度)地图API的使用(APP安卓)

iOS App内部调起百度地图、高德地图、腾讯地图

百度地图标注位置怎么弄?