Vue 高德地图的使用

---

近期，在进行项目开发的时候，系统中一大功能就是物流系统。所以以高德地图原生API结合Vue，开发相关功能...

---

一、如何在Vue中引入高德地图？

①在index.html中
your key 在高德地图官网申请的key码

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key='your key'"></script>

②在main.js中引入

import AMap from "AMap";
Vue.use(AMap);

③在vue.config.js中引入

  configureWebpack: {
    externals: {
      AMap: "AMap",
    },
  },

二、需求一：在首页制作轮播图类型的地图组件

作为子组件，他需要获取从上层父级元素遍历来的数组进行渲染，主要点还是在于要把包括id在内的所有数据动态绑定在data中

<!-- 高德地图组组件 -->
<template>
  <div>
    <div :id="container" style="width: 630px; height: 221px"></div>
  </div>
</template>

<script>
import AMap from "AMap";
export default {
  data() {
    return {
      container: "",
      lineArr: [],
      map: {},
      maker: {},
      polyline: {},
    };
  },
  created() {
    this.printData();
  },
  mounted() {
    this.init();
  },
  props: ["recordData"],
  methods: {
    printData() {
    //处理从上层传值来的数据
      this.lineArr = this.recordData.recordMap.mapAO;
      this.container = this.recordData.id;
    },
    init() {
      //制作地图
      this.map = new AMap.Map(this.recordData.id, {
        resizeEnable: true,
        center: this.recordData.recordMap.mapData.center,
      });
      //制作点
      this.marker = new AMap.Marker({
        map: this.map,
        position: this.recordData.recordMap.mapData.position,
      });
      //制作路径
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: "#28F",
        strokeWeight: 6,
      });
      //打印点，路径，以及动态设置zoom大小
      this.map.add(this.marker);
      this.map.setFitView();
      this.map.setZoom(16);
    },
  },
};
</script>


<style  scoped>
</style>

---