WEB页面或者H5页面如何打开高德或者百度地图APP导航（实战向）

2024-06-23 17:48| 来源: 网络整理| 查看: 265

一、序言

在日常开发中，地图的接入使用在各大app和网站中我们都不难见到，打开方式也各有不同，嵌套内部的，或者是直接打开百度，高德，谷歌等地图app。相对来说，各大地图app的文档写的非常齐全，即使是按照官网示例复制进去也能起到该有的效果，需要用什么功能搜什么功能就是了。唯独打开地图app可能很多小伙伴总是搜不到，所以，本文介绍一下，如何在网页或者H5内调用百度和高德（用这俩的最多，就直接说这俩了）

二、如何在页面内调用地图

其实很简单，基本上来说，看一眼就会了，其实就仅仅只是一个url链接，跳转过去就是了，也就是说：window.location.href = ‘这里面写url地址’ 就这样，没了，可能没写过的人想不到会这么简单

三、如何搜索文档

百度地图： 1、选择开发文档 2、搜素uri或者搜索地图调起api 3、选择搜出来的第一项就是文档了或者直接在开发文档选择的时候直接选取百度地图选择地图调用api 高德地图：百度都知道怎么玩了，高德还用讲吗？？？扔个选择图片看看咯高德地图选择地图调用api

四、怎么跳转

其实有了官方文档，这个都完全没必要说，直接给大家看看实战中我怎么写的吧（其实api功能很齐全，也可以顺便看看别的，如果不是强制要求使用内嵌式的，完全可以完全用第三方，省时省力）

//地图导航 /** * 需要参数: * @val{确认是哪个跳转哪个端口} * @myLocation {自身地址，我存了缓存取的} * @lng/lat{经纬度} * @myLocation.formattedAddress {起点地址名称} * @cabinData{终点地址数据} * 其余的应该一眼能看懂吧（我这是vue，其他开发方式的请自行转换） */ isnavigation(val) { let that = this let myLocation = JSON.parse(sessionStorage.getItem('ownChooseLocation')) if (this.cabinData.longitude && this.cabinData.latitude) { let Url = '' switch (val) { case 'amap': Url = `https://uri.amap.com/navigation?from=${myLocation.lng},${myLocation.lat},${myLocation.formattedAddress}&to=${that.cabinData.longitude},${that.cabinData.latitude},${that.cabinData.name}&callnative=1` break case 'bmap': Url = `http://api.map.baidu.com/direction?origin=latlng:${myLocation.lat},${myLocation.lng}|name:${myLocation.formattedAddress}&destination=latlng:${that.cabinData.latitude},${that.cabinData.longitude}|name:${that.cabinData.name}&mode=driving&origin_region=${myLocation.city}&destination_region=${that.cabinData.cityName}&output=html&src=webapp.baidu.openAPIdemo` break } location.href = Url } else { this.$message({ message: '请先确认您的起点和终点位置', type: 'warning', }) } }, 五、注意

如果是APP内的H5页面调用，需要APP那边开通跳转，否则会直接被拦截，从而显示网络错误（错误代码302）

其实没啥难的，做过一次肯定就不会有什么疑问了，有问题欢迎留言评论，最后附上高德和百度地图的开发平台地址百度地图高德地图

【本文地址】

公司简介

联系我们