高德地图-----矢量图形

最新推荐文章于 2026-05-18 12:34:49 发布

原创

最新推荐文章于 2026-05-18 12:34:49 发布 · 3k 阅读

收录于

本文介绍了如何在Vue项目中封装高德地图组件，并创建一个子组件用于绘制矢量线路。首先在公共HTML文件中引入高德地图API并配置ESLint以识别AMap和AMapUI。接着，创建`scottMap.vue`作为全局地图组件，根据传入的参数决定是否显示矢量线路。然后，`mapVectorLine.vue`负责绘制和关闭线路。最后，在页面中调用`scottMap`组件，通过`isVectorLine`属性控制显示矢量线路。

准备工作

在public中的index.html中初始化地图

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

在 .eslintrc.js 中配置AMap和AMapUI

globals: {
   
   
    "AMap": "true",
    "AMapUI":"true",
  }

实现思路

封装一个全局组件scottMap.vue，用于加载地图
封装一个基于scottMap.vue的组件mapVectorLine.vue，用于在地图上画出矢量图形
通过v-if和组件传参，确定需要的地图组件
组件嵌套封装代码（一个地图上面有多个功能），相比一个地图上封装一个功能，这种方式加载速度更快

scottMap.vue

<template>
  <div class="m-map">
    <div id="js-container" class="map">正在加载数据 ...</div>
    <div class="route">
        <map-vector-line v-if="isVectorLine" :map="map"></map-vector-line>
    </div>
  </div>
</template>

<script>
import MapVectorLine from './scottMap/mapVectorLine.vue'
/*
  传递参数:
    1. isVectorLine:  是否需要矢量路
*/