Vue h5实现跳转百度、高德地图、腾讯地图

1、在index.html文件引入js

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=3e4d1229e928904d97938107acc0305b&plugin=AMap.Geocoder"></script>

2、添加跳转按钮

<div @click=" navToMap(f_c_address, 1)">百度地图</div>
<div @click=" navToMap(f_c_address, 2)">高德地图</div>
<div @click=" navToMap(f_c_address, 3)">腾讯地图</div>
<!-- 参数分别代表终点地址、地图类型  -->

3、具体实现代码

data() {
    return {
       f_c_address: "广东省惠州市万科双月湾",
       latitude: 0,
       longitude: 0,
    }
},
methods: {
    navToMap(name, type) {
        let self = this
        const geocoder = new AMap.Geocoder({
          city: '全国',
          batch: true
        });
        geocoder.getLocation(this.f_c_address, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            const location = result.geocodes[0].location;
            self.latitude = location.lat
            self.longitude = location.lng
          }
        });//获取终点地址经纬度
        let url
        let lat, long
        const u = navigator.userAgent
        //判断ios
        const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
        //判断Android
        const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
        lat = self.latitude
        long = self.longitude
        if (isIOS) {
         switch (type) {
          case 1: //百度地图
            url = `http://api.map.baidu.com/marker?location=${lat},${long}&title=${name}&content=${name}&output=html`
            break
          case 2: //高德地图
            url = `http://uri.amap.com/marker?position=${long},${lat}&name=${name}&src=mypage&coordinate=gaode&callnative=0`
            break
          case 3: //腾讯地图
            url = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${lat},${long};addr:${name}`
            break;
          default:
            break
        }
       } else {
        switch (type) {
          case 1: //百度地图
            url = `http://api.map.baidu.com/marker?location=${lat},${long}&title=${name}&content=${name}&output=html`
            break
          case 2: //高德地图
            url = `http://uri.amap.com/marker?position=${long},${lat}&name=${name}&src=mypage&coordinate=gaode&callnative=0`
            break
          case 3: //腾讯地图
            url = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${lat},${long};addr:${name}`
            break;
          default:
            break
        }
      }
      window.location.href = url;
      //window.open(url);  
    }
}

4、效果展现