一、前言
在日常开发中，不难在各大APP和网站中看到地图的访问和使用。 打开方式也不同，内部嵌套，或者直接打开百度、高德、谷歌等地图应用。 相对而言，各大地图应用的文档都非常齐全。 即使你照搬官网的例子，也能达到想要的效果。 您只需要搜索您需要的功能即可。 很多朋友可能仅仅打开地图应用就找不到。 因此，本文介绍如何在网页或者H5上调用百度和高德地图（这两个用得最多，所以就只讲这两个）
2.如何调用页面内的地图
其实很简单。 基本上一看就知道了。 其实就是一个url链接，直接跳转到就可以了，也就是说：..href = '这里写下url地址' 就这样了，没了，也许没写过的人绝对想不到这么简单。
3. 如何检索文档
百度地图：
1、选择开发文档
2. 搜索URI或搜索地图调用API
3. 找到的第一个项目是文档。
或者在选择开发文档时直接选择。
高德地图：
百度已经知道怎么玩了，那高德还需要讲吗？ ？ ?看看所选的图片
4. 如何跳跃
其实有了官方文档，这个就不用说了。 我就给大家展示一下我实际中是怎么写的（其实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',
})
}
},
5、注意事项
如果是APP内的H5页面调用，APP需要开启跳转，否则会直接拦截，从而显示网络错误（错误码302）
事实上，这并不难。 如果你做过一次，你绝对不会有任何疑问。 如果您有任何疑问，请发表评论。 最后附上高德地图和百度地图的开发平台地址。
百度地图
高德地图
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。