vue调起高德api，打点，跳入

首先申请高德地图的官方appkey

vue项目，静态地图，打点可以选择web端（js Api），（非web服务），微信小程序使用微信小程序，注： uni-app 可以选择腾讯地图更好，适配性更好

申请完appkey后

在自己的页面引入key

 <div id="container" style="height: 266px;width: 100%"></div>



      createMap(longitude,latitude) {
        //1.地图初始化时，在地图上添加marker标记,鼠标点击marker可弹出自定义的信息窗体
        var mapData = new AMap.Map('container', {
          resizeEnable: true,
          center: [longitude,latitude], //地图中心点位置
          zoom: 18,
        })
        var marker = new AMap.Marker({
    position: new AMap.LngLat(longitude,latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '淄博'
});

// 将创建的点标记添加到已有的地图实例：
mapData.add(marker);
let self=this
AMap.event.addListener(marker, 'click', (e) => {
          self.markerClick(marker,e)
        })
        return mapData
      },
    markerClick(marker,e){
      this.show=true
      this.mapDatas.longitude=marker.Qi.position.lng
      this.mapDatas.latitude=marker.Qi.position.lat

    },

    setMap(item,index){
      if(this.oldIndex==null){
     
      }else{
        document.getElementsByClassName('contentTr')[this.oldIndex].classList.remove("blue")  
      }
          this.oldIndex=index
        document.getElementsByClassName('contentTr')[index].classList.add("blue")

        getLongitudeAndLatitude(item.address).then(res=>{
          this.mapDatas={
          name:item.name,
          address:item.address,
          longitude:res.data.longitude,
          latitude:res.data.latitude,
        }
        this.createMap(this.mapDatas.longitude, this.mapDatas.latitude)
          })



    },

最后可以调起高德app

window.open(`https://uri.amap.com/navigation?to=${this.mapDatas.longitude},${this.mapDatas.latitude},${this.mapDatas.name},${this.mapDatas.address}&mode=car&policy=0&src=mypage&coordinate=gaode&callnative=1`)

vue调起高德api，打点，跳入

猜你喜欢