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

13,754 阅读4分钟

前言

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

高德地图文档

起步-加载高德地图

// 进入
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);
    };
  });
}

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

<script>
import AMap from "@/utils/AMap";

export default {
  name: "home",
  data() {
    return {
      map: null
    };
  },
  created() {
    window.title = "地图";
  },
  mounted() {
    this.initAMap();
  },
  methods: {
    async initAMap() {
      try {
        const res = await AMap();
        this.map = new res.Map("container", {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: 11, //初始化地图层级
          center: [116.397428, 39.90923] //初始化地图中心点
        });
      } catch (err) {
        console.error(err);
      }
    }
  }
};
</script>

获取传入的宝箱位置


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

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

<script>
import AMap from "@/utils/AMap";

export default {
  name: "home",
  data() {
    return {
      map: null,
      // 宝箱位置
      lng: null,
      lat: null,
      
      // 新增
      resMap: null
    };
  },
  created() {
    this.lng = this.$route.query.lng;
    this.lat = this.$route.query.lat;
  },
  mounted() {
    this.initAMap();
  },
  methods: {
    async initAMap() {
      try {
        // 修改
        this.resMap = await AMap();
        
        this.map = new this.resMap.Map("container", {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zooms: [3, 19], //设置地图级别范围
          zoom: 14, //初始化地图层级
          zoomEnable: true, // 是否缩放
          scrollWheel: true, // 是否支持滚轮缩放
          dragEnable: true, // 是否支持鼠标拖拽平移
          jogEnable: true, // 是否支持缓动效果
          buildingAnimation: true, // 模块消失是否有动画效果
          center:  [this.lng, this.lat] //初始化地图中心点
        });
      } catch (err) {
        console.error(err);
      }
    }
  }
};
</script>

添加点标记

新建一个函数

// 创建点标记
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: "<div class='info'>我</div>", //设置文本标注内容
          direction: "bottom" //设置文本标注方位
        });
      }
    }
},

最后

水平有限,有错漏之处各位大佬轻喷!

参考

在vue项目中异步使用高德地图AMap