返回介绍

1.3.1 地图

发布于 2020-10-10 06:02:21 字数 14875 浏览 8946 评论 0 收藏 0

基础示例

<vuep template="#example"></vuep>

<script v-pre type="text/x-template" id="example">

  <template>
    <div class="amap-page-container">
      <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
      </el-amap>

      <div class="toolbar">
        <button @click="getMap()">get map</button>
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    // NPM 方式
    // import { AMapManager } from 'vue-amap';
    // CDN 方式
    let amapManager = new VueAMap.AMapManager();
    module.exports = {
      data: function() {
        return {
          amapManager,
          zoom: 12,
          center: [121.59996, 31.197646],
          events: {
            init: (o) => {
              console.log(o.getCenter())
              console.log(this.$refs.map.$$getInstance())
              o.getCity(result => {
                console.log(result)
              })
            },
            'moveend': () => {
            },
            'zoomchange': () => {
            },
            'click': (e) => {
              alert('map clicked');
            }
          },
          plugin: ['ToolBar', {
            pName: 'MapType',
            defaultType: 0,
            events: {
              init(o) {
                console.log(o);
              }
            }
          }]
        };
      },

      methods: {
        getMap() {
          // amap vue component
          console.log(amapManager._componentMap);
          // gaode map instance
          console.log(amapManager._map);
        }
      }
    };
  </script>

</script>

静态属性

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

名称类型说明
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

用于获取地图实例,以及获得地图内组件的实例。

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

ref 可用方法

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

函数返回说明
$$getInstance()AMap.Map获取地图实例
$$getCenter()[lng: Number, lat: Number]获取地图中心

事件

事件参数说明
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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文