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(<