手绘地图渲染组件使用文档

使用案例

• 注意: 该组件位于ith-admin/components中,项目在使用时需要去 高德开放平台 (opens new window) 申请key,在组件中调整配置

<template>
  <base-amap
    width="100%"
    height="calc(100vh - 140px)"
    :layer-img="formData.url"
    :south-west="formData.southWest"
    :north-east="formData.northEast"
    :center="formData.center"
    :zoom="formData.zoom"
    aync
  />
</template>
<script>
import BaseAmap from '@/components/BaseAmap'

export default {
  components: {
    BaseAmap,
  },
  data() {
    return {
      formData: {
        // 中心点
        center: '117.163215,31.838339',
        // 西南角经纬度
        southWest: '',
        // 东北角经纬度
        northEast: '',
        // 图片地址
        url: 'https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
        // 缩放级别
        zoom: 15
      }
    }
  }
}
</script>

Attributes

参数	说明	类型	默认值	可选值
width	地图容器宽度	string	500px	--
height	地图容器高度	String	500px	--
layerImg	图层图片地址	string	--	--
southWest	图片容器的西南角经纬度(高德地图例: 117.15015,31.846688)	string	--	--
northEast	图片容器的东北角经纬度(高德地图例: 117.176114,31.832433)	string	--	--
center	中心点经纬度	string	--	--
zoom	地图缩放级别	number/string	15	--
aync	开启同步后,图层图片和容器经纬度有变更将自动更新	boolean	false	--

Methods

方法名	说明	参数
initMap	初始化地图	--