vue-amap 学习总结

1.  使用

      <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>

2. 在定制化程度较高的项目中,开发者可能只想通过 vue-amap 引入高德地图,而部分实例化的操作直接基于高德地图的 sdk 完成。这个时候就需要 lazyAMapApiLoaderInstance

lazyAMapApiLoaderInstance.load().then(() => {
  // your code ...
  this.map = new AMap.Map('amapContainer', {
    center: new AMap.LngLat(121.59996, 31.197646)
  });
});

3. 静态属性,不支持响应

vidString地图容器节点的ID。
amapManagerAMapManager地图管理对象。
defaultCursorString地图默认鼠标样式。参数defaultCursor应符合CSS的cursor属性规范。
animateEnableBoolean地图平移过程中是否使用动画,默认为true,即使用动画。
isHotspotBoolean是否开启地图热点,默认false 不打开。
rotateEnableBoolean地图是否可旋转,默认false。
resizeEnableBoolean是否监控地图容器尺寸变化,默认值为false。
showIndoorMapBoolean是否在有矢量底图的时候自动展示室内地图,PC端默认是true,移动端默认是false。
expandZoomRangeBoolean是否支持可以扩展最大缩放级别.设置为true的时候,zooms的最大级别在PC上可以扩大到20级,移动端还是高清19/非高清20。
dragEnableBoolean地图是否可通过鼠标拖拽平移,默认为true。
zoomEnableBoolean地图是否可缩放,默认值为true。
doubleClickZoomBoolean地图是否可通过双击鼠标放大地图,默认为true。
keyboardEnableBoolean地图是否可通过键盘控制,方向键控制地图平移,"+"和"-"可以控制地图的缩放,Ctrl+“→”顺时针旋转,Ctrl+“←”逆时针旋转,默认为true。
jogEnableBoolean地图是否使用缓动效果,默认值为true。
scrollWheelBoolean地图是否可通过鼠标滚轮缩放浏览,默认为true。
touchZoomBoolean地图在移动终端上是否可通过多点触控缩放浏览地图,默认为true。

动态属性

名称类型说明
zoomsArray地图显示的缩放级别范围,在PC上,默认范围[3,18],取值范围[3-18];在移动设备上,默认范围[3-19],取值范围[3-19]
centerArray地图中心点坐标值
labelzIndexNumber地图标注显示顺序
langString地图语言类型 默认:zh_cn,可选值:zh_cn:中文简体,en:英文,zh_en:中英文对照
mapStyleString设置地图显示样式,目前支持normal(默认样式)、dark(深色样式)、light(浅色样式)、fresh(osm清新风格样式)四种

 AmapManager

名称参数返回类型说明
getMap AMap.Map返回地图实例,注入该管理实例的组件的地图实例
getChildInstancevidinstance返回 vid 对应的组件实例

事件

事件参数说明
complete 地图图块加载完成后触发事件
clickMapsEvent鼠标左键单击事件 相关示例
dblclickMapsEvent鼠标左键双击事件
mapmove 地图平移时触发事件
hotspotclick{type,lnglat,name,id}鼠标点击热点时触发(自v1.3 新增)
hotspotover{type,lnglat,name,id}鼠标滑过热点时触发(自v1.3 新增)
hotspotout{type,lnglat,name,id}鼠标移出热点时触发(自v1.3 新增)
movestart 地图平移开始时触发
moveend 地图平移结束后触发。如地图有拖拽缓动效果,则在缓动结束后触发
zoomchange 地图缩放级别更改后触发
zoomstart 缩放开始时触发
zoomend 缩放停止时触发
mousemoveMapsEvent鼠标在地图上移动时触发
mousewheelMapsEvent鼠标滚轮开始缩放地图时触发
mouseoverMapsEvent鼠标移入地图容器内时触发
mouseoutMapsEvent鼠标移出地图容器时触发
mouseupMapsEvent鼠标在地图上单击抬起时触发
mousedownMapsEvent鼠标在地图上单击按下时触发
rightclickMapsEvent鼠标右键单击事件
dragstart 开始拖拽地图时触发
dragging 拖拽地图过程中触发
dragend 停止拖拽地图时触发。如地图有拖拽缓动效果,则在拽停止,缓动开始前触发
resize 地图容器大小改变事件
touchstartMapsEvent触摸开始时触发事件,仅适用移动设备
touchmoveMapsEvent触摸移动进行中时触发事件,仅适用移动设备
touchend  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值