vue-amap基于vue的高德地图使用_amap vue

当时使用vue-amp做的一个地图展示大屏

高德地图的官网API：https://lbs.amap.com/api/javascript-api/summary/

vue-amap的中文文档：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

 一、vue-amap准备工作

1、安装vue-amap

npm方式，推荐使用npm引入

npm install vue-amap --save

 CDN方式

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>

2、项目引入

在main.js中引入，对应的插件有注释说明

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '自己的key',
  plugin: [
    "AMap.Autocomplete", // 输入提示插件
    "AMap.PlaceSearch", // POI搜索插件
    "AMap.Scale", // 右下角缩略图插件 比例尺
    "AMap.OverView", // 地图鹰眼插件
    "AMap.ToolBar", // 地图工具条
    "AMap.MapType", // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", // 编辑 折线多，边形
    "AMap.CircleEditor", // 圆形编辑器插件
    "AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
    "AMap.ControlBar"   // 缩放、尺寸控制器
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.15',
});

二、创建地图容器

1、<el-amap></el-amap>来创建一个地图出来

<el-amap
    ref="centerMap"
    class="amap-box"
    :vid="'amapVue'"
    :zoom="mapConfig.zoom"
    :zooms="mapConfig.zooms"
    :center="mapConfig.center"
    :amap-manager="amapManager"
    :plugin="plugin"
    :events="mapEvents"
>
</el-amap>

 2、基础配置

mapConfig: {
    zoom: 15,    // 当前缩放层级
    zooms: [14, 18],    // 地图缩放层级范围
    center: [115.779166, 33.824559],    // 地图中心点
},

3、amapManager是地图的管理对象

官网上有明确说明，可以通过amapManager来获取一系列的地图对象实例（地图、点、线等）

 4、plugin，地图插件

在这里我使用到了一个插件：图层控制，使用图层控制来显示卫星图，再使用css样式表来将右上角的图层控制器给隐藏，在我的另外一篇有说明https://blog.csdn.net/m0_37755267/article/details/119572237

plugin: [
    {
       pName: "MapType",
       defaultType: 1, //0代表默认，1代表卫星
       showTraffic: false, // 路网
       showRoad: true, // 路况
    }
]

5、events，事件集合对象

events我是叫它事件集合对象，因为所有的一些回调函数或事件方法都可以在这下面写，地图的events里有一些地图的渲染生命周期的回调，具体参考官网，主要用的两个init()和complete()

init()中有个参数，此参数就是地图的实例对象

complete()地图加载完成后触发，在这里我主要是将地图的所有覆盖物展示在可视区域内，使用

amapManager.getMap().setFitView();

mapEvents: {
    init: (o) => {
        // ... 初始地图的一些操作
    },
    complete: () => {
        // ... 地图渲染完成后的一些操作
    }
}

三、自定义图片图层

<el-amap-ground-image
     :vid="'backImage'"
     :url="groundimage.url"
     :bounds="groundimage.bounds"
></el-amap-ground-image>

bounds是图片左上角、右上角的坐标（我觉得这里有点坑，应该设4个点，2个点很不好对应）

groundimage: {
    url: "自定义的图片地址",
    bounds: [
          [115.751557, 33.837427],
          [115.799549, 33.837356],
    ]
}

四、创建点marker

<el-amap-marker 
    v-for="(item, index) in poiLists"
    :vid="'amap-marker-one' + index"
    :position="item.position"
    :icon="item.icon"
    :clickable="true"
    :events="item.events"
    :animation="item.animation"
    :label="poiTemplate(ele, item)"
    :extData="item"
></el-amap-marker>

1、position：为marker点的坐标（经纬度），接收数组

2、icon：自定义图标

3、clickable：true允许用户可点击marker点（默认也是true）

4、events：事件集合对象，click、dblclick、rightclick、mouseover、mouseout等

events: {
    click: (e) => {
        // ...点击操作
    },
    dblclick: (e) => {
        // ...双击操作
    },
    ...
}

5、animation：marker点的动画效果

        marker点弹跳效果：设置值为 AMAP_ANIMATION_BOUNCE

6、label：点显示的简略信息

        content可以是文字字符串也可以是html

        offset是label的偏移量，[x, y]

{
    content: "<div class='poi-content'>${item.eventName}</div>",
    offset: [40, 7],
}

6、marker点的方法，可以通过refs、vid来获取对应的点实例

五、绘制多边形

这个多边形好像没什么说的，path接收一个二维数组，里面是经纬度集合

<el-amap-polygon
    :vid="'amap-polygon-one'"
    :path="areaPointerList"
    editable="true"
    strokeStyle="dashed"  // 边线是实线还是虚线，dashed、solid
    strokeColor="#FF0000" // 边线颜色值
    strokeWeight="2"    // 边线宽度
    strokeOpacity="0.8"    //边线透明度
    fillColor="#1791fc" // 封闭区域内的填充色
    fillOpacity="0.3"    // 封闭区域内的透明度
></el-amap-polygon>