高德地图路线规划途径点vue3

2023-12-18 17:49:02

前言:在vue2中,需要安装vue-amap来进行操作,但是在vue3就不支持了,就用原生的amap来

1.安装amap-loader

   npm install @amap/amap-jsapi-loader

然后在到vue文件中引用

import AMapLoader from '@amap/amap-jsapi-loader'

2.创建地图容器并且添加东西

????在vue3中,高德地图的很多操作都局限于一个then()函数里面,可以通过提前方法来实现简化。

//可以写在方法,放在onMount里面
AMapLoader.load({
    "key": "d69*********************28",  // 申请好的Web端开发者Key,首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JS API 的版本,缺省时默认为 1.4.15
    "plugins": 
    //组件引入,在这里面写自己需要的组件就行了
['AMap.PlaceSearch','AMap.Geolocation','AMap.ToolBar','AMap.Scale','AMap.GeoJSON','AMap.ControlBar','AMap.AutoComplete','AMap.Polyline','AMap.HawkEye','AMap.Driving',' AMap.PlaceSearch'],           // 需要使用的的插件列表,如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI,缺省不加载
      "version": '1.1',   // AMapUI 版本
      "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca, 缺省不加载
      "version": '2.0'  // Loca 版本
    },
  }).then((AMap)=>{
  //创建一个地图容器,可以放在外面写
    map.value = new AMap.Map('container',{//是否为3D地图模式
      zoom:15,           //初始化地图级别
      center:[104.865284,31.58872], //初始化地图中心点位置
      mapStyle: 'amap://styles/normal',
      resizeEnable: true,
      viewMode: '3D',
    });
    ........
    下面是我们需要进行写的
   }
  }

3.路线规划组件

????首先我们需要在plugins里面去引用,就是那个数组里面,路线规划有很多种,如驾车路线规划,步行路线规划,公交路线规划,骑行路线规划,电动车路线规划。这里我就举例驾车路线规划,其他的几种都差不多的。

  • 驾车路线规划:AMap.Driving
  • 步行路线规划:AMap.Walking
  • 骑行路线规划:AMap.Riding
  • 公交路线规划:AMap.Transfer

????首先需要了解点位,路线规划可能需要点位,当我们有需求需要途径点的时候,就需要添加点位,如果需求只是起始点的话,那就不需要引入点位组件。
????下面是一个具体的例子,一个点位创建方法

const addMarker=(AMap,text,x,y,id)=>{
//创建点位图标
  const startIcon = new AMap.Icon({
    // 图标尺寸
    size: new AMap.Size(25, 34),
    // 图标的取图地址(这里可不能用本地相对路径)
    image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
    // 图标所用图片大小
    // imageSize: new AMap.Size(135, 40),
    // 图标取图偏移量
    imageOffset: new AMap.Pixel(5, 0)
  });
  //这是点位创建
   let marker= new AMap.Marker({
    position: new AMap.LngLat(x, y),
    offset: new AMap.Pixel(-13, -30),
    icon: startIcon, // 添加 Icon 图标 URL
    title: text,
  })
  //设置文本,就是图标下面的文字
  marker.setLabel({
    direction:'top',
    offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
    content: "<div class='info'>"+text+"</div>", //设置文本标注内容
  });
   marker.setExtData({id:id})
    return marker
}

????然后就是我们的路线规划组件,不过途径点在高德地图是有上限的,一条路线最多16个点,如果你的途径点比较多的话,就需要用几条路线拼接在一起。(比较坑的一点)

 const driving = new AMap.Driving({
       //高德自己的算法, 
       //驾车策略,包括 LEAST_TIME,LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC
      policy: AMap.DrivingPolicy.LEAST_TIME,
      //这里的是地图容器实例,不要忘记value
      map:map.value,
      //结果列表的HTML容器id或容器元素,结果列表将在此容器中进行展示
      panel: "panel"
    })
    //上面只是创建而已
    //对应的参数,起始点,终点,途径点数组,反馈函数
    //起始点等点都是需要创建new AMap.LngLat(x, y),经纬度。
    driving.search(start,end,{waypoints:wayPoints}function(status, result){
    
    }
    )

注意不要超出AMapLoader.load({…}).then(){}这个then函数的外面。

文章来源:https://blog.csdn.net/m0_62806610/article/details/134169356
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。