uniapp实现高德地图定位,起点到终点连线

首先npm 引入 

1
import AMapLoader from "@amap/amap-jsapi-loader";

  

在生命周期里加载实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
data(){
  return {
    amap:{}, // 存放高德地图实例对象
    mapObj: {},  // 存放当前绘画出的地图对象
  }
}
 
mounted() {
    // 初始化地图
    AMapLoader.load({
      key: "", // 申请好的Web端开发者Key,首次调用 load 时必填
      version: "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
      AMapUI: {
        // 是否加载 AMapUI,缺省不加载
        version: "1.1", // AMapUI 缺省 1.1
        plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
      },
    // 引入api
      plugins: [ 
        "AMap.Driving"// 驾车出行
        "AMap.Geolocation"// 定位
        "AMap.Autocomplete"// 输入提示插件
        "AMap.PlaceSearch",   // POI搜索插件
      ], //插件列表
    }).then((AMap) => {
      this.amap = AMap;
      this.initMap();
    });
},
 
methods: {
  
initMap() {
   
  let that = this;
  // 定位icon
  let locationIcon = {
    showButton: true, //是否显示定位按钮
    buttonPosition: "RB", //定位按钮的位置
    /* LT LB RT RB */
    buttonOffset: new AMap.Pixel(10, 50), //定位按钮距离对应角落的距离
    showMarker: true, //是否显示定位点
    markerOptions: {
      //自定义定位点样式,同Marker的Options
      offset: new AMap.Pixel(-18, -36),
      content:
        '<img src="static/image/home/big-location.png" style="width:36px;height:36px"/>',
    },
    showCircle: true, //是否显示定位精度圈
    circleOptions: {
      //定位精度圈的样式
      strokeColor: "#0093FF",
      noSelect: true,
      strokeOpacity: 0.5,
      strokeWeight: 1,
      fillColor: "#02B0FF",
      fillOpacity: 0.25,
    },
  };
  that.mapObj = new this.amap.Map("myMap", {
    // container为容器的id
    resizeEnable: true,
    zoom: 12, //初始化地图层级
  });
 
  // 实例化一个定位
  let geolocation = new AMap.Geolocation(locationIcon);
  this.mapObj.addControl(geolocation);
  geolocation.getCurrentPosition();
 
  // 成功后回调
  AMap.event.addListener(geolocation, "complete", function (data) {
    if (data.info === "SUCCESS") {
      console.log(data)  // 这里是定位成功后的输出数据
    }
  });
  // 失败回调
  AMap.event.addListener(geolocation, "error", function (data) {
    alert("获取当前定位失败");
  });
 
   
  let drivingOption = {
    map: this.mapObj,
    policy: AMap.DrivingPolicy.LEAST_TIME,
  };
 
  this.drivingObj = new AMap.Driving(drivingOption); //构造驾车导航类
},
}

  

  

开启定位生成如下图(注意如果到正式服,高德的定位需要配置https才能开启)

添加搜索功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
searchHandel(cityVal) {
      let that = this;
 
      let autoOptions = {
        citylimit: true,
        city: "440304", // 配置文档 https://developer.amap.com/api/javascript-api/reference/lnglat-to-address#m_AMap.Geocoder
      };
      let auto = new AMap.Autocomplete(autoOptions);
 
      if (cityVal) {
        auto.search(cityVal, function (status, result) {
          if (status === "complete" && result.info === "OK") {
                console.log('这里是搜索成功的数据,这个数据可以放到搜索列表里', result)
          }
        });
      }
},

  

添加点击搜索列表事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
listSelect(item) {
      let that = this;
 
      // 新建icon
      function setIcon(l) {
        return new AMap.Icon({
          size: new AMap.Size(25, 34),
          image: "static/image/home/dir-marker.png",   // 这里是一些雪碧图icon
          imageSize: new AMap.Size(135, 40),
          imageOffset: new AMap.Pixel(l, -3),   // 雪碧图偏移值
        });
      }
 
      // 将 icon 传入 marker
      let marker;
      function setMarker(data) {
        // current 0 为起始位置   1位终点
        if (that.current == 0) {
          //添加marker
          marker = new AMap.Marker({
            map: that.mapObj,
            icon: setIcon("-9"),
            position: data.location,
          });
          that.startValue = item.name;
        } else {
          //添加marker
          marker = new AMap.Marker({
            map: that.mapObj,
            icon: setIcon("-95"),
            position: data.location,
          });
 
          that.endValue = item.name;
        }
      }
 
      
      that.position = item.location;
      setMarker(item);
      // 重新刷新地图定位
      this.mapObj.setZoomAndCenter(12, item.location);
     
    },    

  

完成效果如图

 

posted @   惠鹏曦  阅读(5467)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
历史上的今天:
2018-03-15 WebSocket 是什么原理?为什么可以实现持久连接?
2018-03-15 jsonp的原理,应用场景,优缺点
2018-03-15 JSONP安全防范解决方案新思路
2018-03-15 移动前端自适应适配布局解决方案和比较
2018-03-15 跨域解决方法之window.name
点击右上角即可分享
微信分享提示