@vuemap/vue-amap@vuemap/vue-amap
  • 1.x
  • vue2版本
更新日志
  • github
  • gitee
  • JSAPI文档
  • JSAPI示例地址
  • Loca API文档
  • Loca 示例地址
  • 掘金
  • CSDN
  • 1.x
  • vue2版本
更新日志
  • github
  • gitee
  • JSAPI文档
  • JSAPI示例地址
  • Loca API文档
  • Loca 示例地址
  • 掘金
  • CSDN
@vuemap/vue-amap
@vuemap/vue-amap-loca
@vuemap/vue-amap-extra
  • 基础

    • 简介
    • 安装
    • 脚本初始化
    • 兼容高德原生 SDK
    • Nuxt服务端渲染
    • 捐赠支持
    • 常见问题
    • 从1.x迁移
    • 离线JSAPI
    • 内置API
    • Typescript支持
  • 自定义

    • 自定义地图组件
    • 包装地图组件
  • 地图

    • 地图
    • 获取高德地图实例
    • 地图插件
  • hooks

    • IP定位获取当前城市信息
    • 天气查询服务
    • 定位
  • 控件

    • 比例尺
    • 地图操作工具
    • 地图控制
    • 地图类型切换
    • 鹰眼控件
    • POI搜索
    • 定位
  • 高德官方图层

    • 默认图层
    • 切片图层
    • 实时交通图层
    • 卫星图层
    • 路网图层
    • 建筑楼块3D图层
    • 简易行政区划图
    • 室内图层
  • 行业标准图层

    • WMS图层
    • WMTS图层
    • 矢量瓦片块图层
  • 自有数据图层

    • 矢量标记图层
    • 热力图
    • 标注层
    • 自定义图层
    • 灵活切片图层
    • 图片图层
    • Canvas图层
    • Video图层
    • 3d自定义图层
    • 3DTiles图层
    • 区划聚合图层
    • 自定义瓦片纠偏图层
  • 点标记

    • 点标记
    • 海量标注
    • 文本
    • 灵活点标记
    • 点聚合
    • 海量点
  • 窗体

    • 信息窗体
  • 矢量图形

    • 多边形
    • 折线
    • 贝塞尔曲线
    • 圆形
    • 椭圆
    • 矩形
    • GeoJSON
  • 工具

    • 鼠标工具插件
  • @vuemap/vue-amap-loca组件

    • Loca
    • 环境光
    • 平行光
    • 点光
    • 圆点图层
    • 图标图层
    • 棱柱图层
    • 线图层
    • 面图层
    • 链接线图层
    • 热力图
    • 蜂窝网格图
    • 网格图
    • 贴地点图层
    • 轨迹线图层
    • 连接飞线图层
    • 垂直于大地表面的Marker图层
    • 激光图层
  • @vuemap/vue-amap-extra组件

    • ThreeJS的图层
    • Gltf模型加载
    • 灯光

      • 环境光
      • 平行光
      • 半球光
      • 点光源
      • 聚光灯
    • ThreeJS播放视频
    • ThreeJS面图层
    • 开源3dtiles方案

地图(AMap)

地图组件

提示

来源 @vuemap/vue-amap 组件库

基础示例

警告

地图(el-amap)外围容器必须设定高度,不然初始化地图失败

普通示例

Setup示例

静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
vidString地图容器节点的ID。
viewModeString地图视图模式, 默认为‘2D’,可选’3D’,选择‘3D’会显示 3D 地图效果。
showLabelBoolean是否展示地图文字和 POI 信息。默认 true
defaultCursorString地图默认鼠标样式。参数defaultCursor应符合CSS的cursor属性规范。
isHotspotBoolean是否开启地图热点和标注的 hover 效果。PC端默认是true, 移动端默认是 false。
wallColorString, Array地图楼块的侧面颜色,示例:'#ffffff' 或者 [255, 0, 0, 1]
roofColorString, Array地图楼块的顶面颜色,示例:'#ffffff' 或者 [255, 0, 0, 1]
showBuildingBlockBoolean是否展示地图 3D 楼块,默认 true
skyColorString, Array天空颜色,3D 模式下带有俯仰角时会显示,示例:'#ffffff' 或者 [255, 0, 0, 1]
WebGLParamsObject额外配置的WebGL参数 eg: preserveDrawingBuffer。默认 {}
touchZoomBoolean地图在移动终端上是否可通过多点触控缩放浏览地图,默认为true。关闭手势缩放地图,请设置为false。
touchZoomCenterNumber可缺省,当touchZoomCenter=1的时候,手机端双指缩放的以地图中心为中心,否则默认以双指中间点为中心。默认:1
showLabelBoolean是否展示地图文字和 POI 信息。默认 true
terrainBoolean是否开启地形,默认false。当前只有版本 2.1Beta支持,需要在初始化时配置version: '2.1Beta'
extraOptionsObject额外扩展属性,会直接将属性拷贝到初始化的options中,当key与props内的一样时会被props覆盖

动态属性

支持响应式。

名称类型说明
centerArray初始中心经纬度1.1.10开始支持v-model
zoomNumber地图显示的缩放级别,可以设置为浮点数;若center与level未赋值,地图初始化默认显示用户所在城市范围。1.1.10开始支持v-model
zoomsArray图显示的缩放级别范围, 默认为 [2, 20] ,取值范围 [2 ~ 30]
rotationNumber地图顺时针旋转角度,取值范围 [0-360] ,默认值:01.1.10开始支持v-model
pitchNumber俯仰角度,默认 0,最大值根据地图当前 zoom 级别不断增大,2D地图下无效 。1.1.10支持开始v-model
featuresArray设置地图上显示的元素种类, 支持'bg'(地图背景)、'point'(POI点)、'road'(道路)、'building'(建筑物),默认值:['bg','point','road','building']
layersArray地图图层数组,数组可以是图层 中的一个或多个,默认为普通二维地图。 当叠加多个 图层 时,普通二维地图需通过实例化一个TileLayer类实现。 如果你希望创建一个默认底图图层,使用 AMap.createDefaultLayer()
resizeEnableBoolean是否监控地图容器尺寸变化,默认值为false。此属性可被 setStatus/getStatus 方法控制
dragEnableBoolean地图是否可通过鼠标拖拽平移, 默认为 true。此属性可被 setStatus/getStatus 方法控制
zoomEnableBoolean地图是否可缩放,默认值为 true。此属性可被 setStatus/getStatus 方法控制
jogEnableBoolean地图是否使用缓动效果,默认值为true。此属性可被setStatus/getStatus 方法控制
pitchEnableBoolean是否允许设置俯仰角度, 3D 视图下为 true, 2D 视图下无效。。此属性可被setStatus/getStatus 方法控制
rotateEnableBoolean地图是否可旋转, 图默认为true。此属性可被setStatus/getStatus 方法控制
animateEnableBoolean地图平移过程中是否使用动画(如调用panBy、panTo、setCenter、setZoomAndCenter等函数, 将对地图产生平移操作, 是否使用动画平移的效果), 默认为true, 即使用动画。此属性可被 setStatus/getStatus 方法控制
keyboardEnableBoolean地图是否可通过键盘控制, 默认为true, 方向键控制地图平移,"+"和"-"可以控制地图的缩放, Ctrl+“→”顺时针旋转,Ctrl+“←”逆时针旋转。此属性可被setStatus/getStatus 方法控制
doubleClickZoomBoolean地图是否可通过双击鼠标放大地图, 默认为true。此属性可被setStatus/getStatus 方法控制
scrollWheelBoolean地图是否可通过鼠标滚轮缩放浏览,默认为true。此属性可被setStatus/getStatus 方法控制
showIndoorMapBoolean是否自动展示室内地图,默认是 false。此属性可被setStatus/getStatus 方法控制
mapStyleString设置地图的显示样式,目前支持两种地图样式: 第一种:自定义地图样式,如 "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86" 可前往地图自定义平台定制自己的个性地图样式; 第二种:官方样式模版,如"amap://styles/grey"。 其他模版样式及自定义地图的使用说明见开发指南
labelRejectMaskBoolean文字是否拒绝掩模图层进行掩模
maskArray为 Map 实例指定掩模的路径,各图层将只显示路径范围内图像,3D视图下有效。 格式为一个经纬度的一维、二维或三维数组。

ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.Map获取地图实例

事件

事件参数说明
resize地图容器大小改变事件
complete地图图块加载完成后触发事件
clickMapsEvent鼠标左键单击事件
dblclickMapsEvent鼠标左键双击事件
mapmove地图平移时触发事件
hotspotclick鼠标点击热点时触发
hotspotover鼠标滑过热点时触发
hotspotout鼠标移出热点时触发
movestart地图平移开始时触发
moveend地图平移结束后触发。如地图有拖拽缓动效果,则在缓动结束后触发
zoomchange地图缩放级别更改后触发
zoomstart缩放开始时触发
zoomend缩放停止时触发
mousemoveMapsEvent鼠标在地图上移动时触发
mousewheelMapsEvent鼠标滚轮开始缩放地图时触发
mouseoverMapsEvent鼠标移入地图容器内时触发
mouseoutMapsEvent鼠标移出地图容器时触发
mouseupMapsEvent鼠标在地图上单击抬起时触发
mousedownMapsEvent鼠标在地图上单击按下时触发
rightclickMapsEvent鼠标右键单击事件
dragstart开始拖拽地图时触发
dragging拖拽地图过程中触发
dragend停止拖拽地图时触发。如地图有拖拽缓动效果,则在拽停止,缓动开始前触发
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchendMapsEvent触摸结束时触发事件,仅适用移动设备
最后更新时间:
贡献者: guyangyang, gu, gyy
Next
获取高德地图实例