当时使用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来获取对应的点实例

方法返回值说明
getOffset( )Pixel获取Marker偏移量（自v1.3 新增）
setOffset(offset:Pixel)设置Marker偏移量（自v1.3 新增）
setAnimation(animate:String )设置点标记的动画效果
getAnimation( )String获取点标记的动画效果类型
setClickable(clickable:Boolean )设置点标记是支持鼠标单击事件
getClickable( )Boolean获取点标记是否支持鼠标单击事件
getPosition( )LngLat获取点标记的位置
setPosition(lnglat:LngLat)设置点标记位置
setAngle(angle:Number)设置点标记的旋转角度
getAngle()Number获取点标记的旋转角度
setzIndex(index:Number)设置点标记的叠加顺序，默认最先添加的点标记在最底层
setIcon(content:String/Icon)设置点标记的显示图标
getIcon( )String /Icon当点标记未自定义图标时，获取Icon内容
setDraggable(draggable:Boolean)设置点标记对象是否可拖拽移动
getDraggable( )Boolean获取点标记对象是否可拖拽移动
hide( )点标记隐藏
show( )点标记显示
setCursor(Cursor)String设置鼠标悬停时的光标。 参数cur可为CSS标注中的光标样式
setContent(html:String|htmlDOM)设置点标记显示内容，可以是HTML要素字符串或者HTML DOM对象
getContent( )String获取点标记内容
moveAlong(lnglatlist,speed,f,circlable)以指定的速度，点标记沿指定的路径移动。参数lnglats为路径坐标串；speed为指定速度，单位：千米/小时；回调函数f中可添加自定义功能；参数loop表明是否循环执行动画，默认为false
moveTo(lnglat,speed,Function)以给定速度移动点标记到指定位置。参数lnglat为指定位置，必设；speed为指定速度，单位：千米/小时；回调函数f中添加自定义功能
stopMove( )点标记停止动画
setMap(map:Map)为Marker指定目标显示地图。当参数值取null时，地图上移除当前Marker：setMap(null)
getMap()Map获取Marker所在地图对象
setTitle(title:String)鼠标滑过点标时的文字提示
getTitle( )String获取点标记的文字提示
setTop(isTop:Boolean)地图上有多个marker时，当isTop为true时，marker将显示在最前面；当为false时，marker取消置顶
getTop( )Boolean
setShadow(icon:Icon)为marker设置阴影效果
getShadow( )Icon获取marker的阴影图标
setShape(shape:MarkerShape)设置marker的可点击区域
getShape( )MarkerShape获取marker的可点击区域
setExtData(ext:Any)设置用户自定义属性，支持JavaScript API任意数据类型，如Marker的id等
getExtData( )Any获取用户自定义属性

五、绘制多边形

这个多边形好像没什么说的，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>

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue