调用高德地图和百度地图

1、h5调用高德、百度地图App

//高德地图     百度地图   使用a标签跳转
<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a>
<a href="http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content=所在位置的简介（可选）&output=html">百度地图</a>
   

2、实践项目中使用

该项目是一个使用vue+mint ui实现的移动端系统

2.1、template中代码如下：

<mt-button class="btn" style="margin-bottom:10px" @click="openMap(true)">百度地图</mt-button>
<mt-button class="btn" @click="openMap(false)">高德地图</mt-button>

2.2、方法如下：
注意
百度地图与高德地图的经纬度值放置位置相反
百度地图：纬度，经度
高德地图：经度，纬度

//根据传入的参数判断是不是点击的百度地图   不是则跳转至高德地图
    openMap(isBMap) {
    //调用后台，传入一个参数  获取到需要导航的地点的经纬度和名字
    //res.latitudeInfo 纬度
    //res.longitudeInfo 经度
    //res.name  地名
      customerFittingAddress(this.form.id).then(res => {
        const a = document.createElement('a') // 创建a标签
        a.setAttribute('href', '')// href链接
        a.setAttribute('target', '_blank')// target属性  打开一个新窗口   好像只有在电脑端调试时有用，手机上无效
        if (isBMap) {
        //百度地图
          a.href = 'http://api.map.baidu.com/marker?location=' + res.latitudeInfo + ',' + res.longitudeInfo + '&title=' + res.name + '&output=html'
        } else {
        //高德地图
          a.href = 'https://uri.amap.com/marker?position=' + res.longitudeInfo + ',' + res.latitudeInfo + '&name=' + res.name
        }
        a.click()// 自执行点击事件
      })
    },

3、测试

地名：北京 
经度：116.46 
纬度：39.92

 //百度地图
a.href = 'http://api.map.baidu.com/marker?location=39.92,116.46&title=北京&output=html'
//高德地图
a.href = 'https://uri.amap.com/marker?position=116.46,39.92&name=北京'

百度地图显示如下：

高德地图显示如下：