vue中使用高德地图自定义开发

vue中使用高德地图自定义开发

用一个在地图上挖宝的小例子，来总结下自己使用高德地图的心得。

起步-加载高德地图

// 进入
cd utils

// 创建AMap.js文件
vim AMap.js

AMap.js

export default function MapLoader() {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
    } else {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.async = true;
      script.src =
        "https://webapi.amap.com/maps?v=1.4.15&key=你们自己申请的key&plugin=AMap.Geocoder&callback=initAMap";
      script.onerror = reject;
      document.head.appendChild(script);
    }
    window.initAMap = () => {
      resolve(window.AMap);
    };
  });
}

使用，在那个页面需要用高德地图，就在那个页面调用

获取传入的宝箱位置

// 别忘记在data中添加lng和lat
created() {
    this.lng = this.$route.query.lng;
    this.lat = this.$route.query.lat;
},

考虑后面方便调用高德api，修改下代码

添加点标记

新建一个函数

// 创建点标记
addMarker() {
  this.marker = new this.resMap.Marker({
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position:  [this.lng, this.lat],
    offset: new this.resMap.Pixel(-13, -30)
  });

  this.map.add(this.marker);
  this.map.setFitView();
},

在initAMap 函数中调用

async initAMap() {
      try {
        ...
        this.addMarker()
      } catch (err) {
        console.error(err);
      }
    }

添加矢量圆形

新建一个函数

// 构建矢量圆形
addCircle() {
  return new this.resMap.Circle({
    center: new this.resMap.LngLat(`${this.lng}`, `${this.lat}`), // 圆心位置
    radius: 500, //半径，米
    strokeColor: "#F33", //线颜色
    strokeOpacity: 1, //线透明度
    strokeWeight: 3, //线粗细度
    fillColor: "#ee2200", //填充颜色
    fillOpacity: 0.35 //填充透明度
  });
},

修改 addMarker 函数

// 创建点标记
addMarker() {
  ...
   
  // 记的在data里添加circle
  this.circle = this.addCircle();

  this.map.add([this.marker, this.circle]);
  this.map.setFitView();
},

添加一个图标

新建一个函数

// 创建一个icon
addIcon() {
  return new this.resMap.Icon({
    // 图标尺寸
    size: new this.resMap.Size(40, 40),
    // 图标的取图地址
    image: require("@/assets/images/Treasure Box.png"),
    // 图标所用图片大小
    imageSize: new this.resMap.Size(40, 40)
    // 图标取图偏移量
    // imageOffset: new this.resMap.Pixel(0, 13)
  });
},

修改 addMarker 函数

 // 创建点标记
addMarker() {
  this.marker = new this.resMap.Marker({
    icon: this.addIcon(),
    position: [this.lng, this.lat],
    offset: new this.resMap.Pixel(-20, -20)
  });

  this.circle = this.addCircle();

  this.map.add([this.marker, this.circle]);
  this.map.setFitView();
},

获取当前位置

新建一个函数

// 获取当前位置信息
getCityInfo() {
  this.map.plugin("AMap.Geolocation", () => {
    var geolocation = new this.resMap.Geolocation({
      // 是否使用高精度定位，默认：true
      enableHighAccuracy: true,
      // 设置定位超时时间，默认：无穷大
      timeout: 10000,
      // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
      buttonOffset: new this.resMap.Pixel(10, 20),
      //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      zoomToAccuracy: true,
      //  定位按钮的排放位置,  RB表示右下
      buttonPosition: "RB"
    });

    geolocation.getCurrentPosition();
    this.resMap.event.addListener(geolocation, "complete", this.onComplete);
    this.resMap.event.addListener(geolocation, "error", this.onError);
  });
},

// 获取定位结果
onComplete(res) {
  console.log(res)
},

// 定位出错
onError(err) {
  console.error(err, "--定位出错--");
}

计算宝箱和当前的距离

新建一个函数

// 计算两点之间的距离
calculatingDistance(position) {
  const p1 = [this.lng, this.lat];
  // data中添加myPosition
  this.myPosition = [position.lng, position.lat];
  return this.resMap.GeometryUtil.distance(p1, this.myPosition);
},

修改 onComplete 函数

onComplete(res) {
  // data中添加distance
  this.distance = this.calculatingDistance(res.position);
},

添加是否能挖宝逻辑

当前位置处于宝箱500米范围内可以挖宝，同时显示 ‘我’ 标记

computed: {
    // 是否在500米范围内
    is500() {
      return this.distance === undefined ||
        this.distance === null ||
        this.distance > 500
        ? false
        : true;
    }
},
watch: {
    is500(newValue) {
      if (newValue) {
        const marker = new this.resMap.Marker({
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          position: this.myPosition,
          offset: new this.resMap.Pixel(-13, -30),
          title: "我"
        });
        this.map.add(marker);
        this.map.setFitView();
    
        // 设置鼠标划过点标记显示的文字提示
        marker.setTitle("我");
    
        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        marker.setLabel({
          offset: new this.resMap.Pixel(0, 0), //设置文本标注偏移量
          content: "
我
", //设置文本标注内容
          direction: "bottom" //设置文本标注方位
        });
      }
    }
},

最后

主要方便自己学习，也希望对别人有用，谢谢！！！