高德地图+Vue3.0组件构建

---

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

---

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

①在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>

相关Bug

1.在netlify上代码托管时浏览器报错https错误，在index.html中添加如下代码，再git push，但是记得在开发中注释掉以防止网页报错

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

2.在组价制作中首先就是渲染过程，发现只能渲染第一张图。调试后发现，通过动态绑定id变换可以解决
3.图例问题，要将图例动态放到最后设置，否则在渲染过程中有可能会出现失去图片失效等问题

---