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

2021-03-15 18:32:36 阅读：1649 来源： 互联网

标签：uniapp 连线 mapObj let AMap marker new data 高德

首先npm 引入

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

在生命周期里加载实例

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才能开启）

添加搜索功能

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)
          }
        });
      }
},

添加点击搜索列表事件

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);
    
    },

完成效果如图

标签：uniapp,连线,mapObj,let,AMap,marker,new,data,高德
来源： https://www.cnblogs.com/hpx2020/p/14539284.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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