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

一、序言

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

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

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

三、如何搜索文档

百度地图：
1、选择开发文档
2、搜素uri或者搜索地图调起api
3、选择搜出来的第一项就是文档了
或者直接在开发文档选择的时候直接选取

高德地图：
百度都知道怎么玩了，高德还用讲吗？？？扔个选择图片看看咯

四、怎么跳转

其实有了官方文档，这个都完全没必要说，直接给大家看看实战中我怎么写的吧（其实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）

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