uniapp调用高德、百度、腾讯地图实现方法

适用于uniapp项目、vue项目以及微信小程序和也适用于普通手机h5应用,大家都可以去试试的
适用于安卓端,ios端
废话不多说,直接上代码

// 点击某个地方,调起下面的方法
			// 方法要传入需要标注地点的纬度latitude,经度longitude,地名name
 toMapAPP(latitude,longitude,name){
 	  let url = "";
 if (plus.os.name == "Android") {//判断是安卓端
 	 plus.nativeUI.actionSheet({//选择菜单 
     title: "选择地图应用",
     cancel: "取消",
     buttons: [{title: "腾讯地图"},{title: "百度地图"}, {title: "高德地图"}]
		}, function(e) {
		switch (e.index) {
		//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
		case 1:
	  //注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
     url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
		 break;
	     case 2:
	 url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
		 break;
	     case 3:
	 url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
	     break;
		 default:
		 break;
		}
	 if (url != "") {
	  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: "百度地图"}, {title: "高德地图"}]
					}, function(e) {
				   switch (e.index) {
						  case 1:
		url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
						  break;
						  case 2:
        url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
						   break;
						   case 3:
		url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
						   break;
						   default:
						   break;
						   }
			if (url != "")   
		     url = encodeURI(url);
			 plus.runtime.openURL(url, function(e) {
		     plus.nativeUI.alert("本机未安装指定的地图应用");
						  });
						 }
					   })
				     }
				   }
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
uniapp小程序地图导航是一种基于uniapp框架开发的小程序功能,用于在小程序中实现地图导航的功能。 通过uniapp小程序地图导航,用户可以根据自己的需求选择起点和终点位置,然后在地图界面上展示出最佳的路径规划,并提供导航功能指引用户前往目的地。 uniapp小程序地图导航功能的实现需要借助地图API,一般选择常用的地图服务商,如百度地图高德地图腾讯地图等。 在实现地图导航功能时,首先需要在小程序的页面中引入地图组件,然后获取用户当前位置,并将其显示在地图上。接着,用户可以通过选择地点、输入地址等方式确定起点和终点位置。在用户确定起终点之后,调用相应的地图API来进行路径规划,并将规划结果展示在地图上。 除了展示路径规划,uniapp小程序地图导航还可以提供导航指引。导航指引可以包括语音播报、图像显示等方式,帮助用户按照规划路径前往目的地。 uniapp小程序地图导航还可以提供一些辅助功能,如周边搜索、路线规划查询等功能,方便用户更好地掌握自己的出行情况。 总之,uniapp小程序地图导航是一种非常实用的小程序功能,可以帮助用户在小程序中方便地实现地图导航,规划路径,并提供导航指引,提升用户的出行体验。它的实现需要借助地图API,并结合uniapp框架进行开发。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值