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  
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值