vue已知商家位置调用高德、百度和腾讯地图显示商家位置和导航（a标签href在url后拼接参数）

需求和效果图如下，点击图片，根据坐标显示出商家的位置和名字，上面还有一排路线规划

点击图片后选择地图

高德地图效果图

百度地图
腾讯地图：

最开始看的高德，有vueamap文档，去高德官网配了key查了半天，弄出来了个路线规划，但是发现并没有实用，只要一个路线规划（就是两个点它能自动规划路线）没有方向。于是就换了种形式，发现特别简单，就是通过url跳过去调用第三方就行
里面有安卓ios调用和web调用两种方式，可以看看腾讯的就大概知道什么意思了 添加链接描述

 <!-- 选择地图 -->
    <mt-popup class="popupbox"
      v-model="popupVisible1"
       position="bottom"
       @touchmove.native.stop.prevent>
           <div class="selectmsgbox">
             <a :href="getGaode()"><div class="littlebox">高德地图</div></a>
             <a :href="getBaidu()"><div class="littlebox">百度地图</div></a>
             <a :href="getApple()"><div class="littlebox">apple地图</div></a>
             <a :href="getTencent()"><div class="littlebox">腾讯地图</div></a>
            </div>
    </mt-popup>

因为url后面要拼接参数，找了一个简单的方法拼接url：调用函数

      mapChoose: function(){
        this.popupVisible1=true
      },
      // 掉起百度
      getBaidu: function(){
        return 'http://api.map.baidu.com/marker?location=' + this.position1+'&output=html&title='+this.fahuoAddress
      },
      //掉起高德地图
      getGaode: function() {
        return 'https://uri.amap.com/marker?position=' + this.position+'&name='+this.fahuoAddress
      },
      //调起腾讯地图
      getTencent: function(){
        return 'https://apis.map.qq.com/uri/v1/marker?marker=coord:'+this.position1+';title:'+this.fahuoAddress+';addr:'+this.addressName+'&referer=聚品'
      },

这样就可以轻松得到上面图的效果，
例如腾讯地图，分两种情况调用的，我做的是vue项目以后打包成app，在手机浏览器跑的时候，把浏览器定位服务打开，就可以看到效果了
附上腾讯地图手机浏览器打开效果
点击去这里之后

获取到你的位置

出现规划，但是点击导航的话，就要跳到腾讯地图上去了，其他两个类似，苹果地图还在研究中，感觉是后端调的，以后更