一、序言
在日常开发中，地图的接入使用在各大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）
其实没啥难的，做过一次肯定就不会有什么疑问了，有问题欢迎留言评论，最后附上高德和百度地图的开发平台地址 百度地图 高德地图