@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方案

自定义地图组件

1.1.2版本开始支持自定义地图组件,通过加载registerMixin(选项式API)实现自己的组件,2.1.0版本开始支持通过useRegister(组合式API)来实现自定义组件。

1、选项式API 1.1.2+

1.1使用方法

首先需要导入 registerMixin,再methods中创建一个__initComponent方法,该方法是子组件被创建时调用,可以使用parentInstance.$amapComponent获取到上级组件的实例对象

1.2基础示例代码

创建test.vue组件

<template>
  <div>
  </div>
</template>

<script>
import {registerMixin} from "@vuemap/vue-amap";
import {defineComponent} from "vue";

export default defineComponent({
  name: "test",
  mixins: [registerMixin],
  methods: {
    __initComponent(){
      console.log('this.parentInstance: ', this.parentInstance);
      let map = this.parentInstance.$amapComponent;
      let position = this.parentInstance.$amapComponent.getCenter();
      let marker = new AMap.Marker({
        position: position
      })
      map.add(marker);
    }
  }
})
</script>

地图加载代码

<template>
  <div id="app">
    <el-amap :center="[116.335036, 39.900082]" :zoom="8">
      <test />
    </el-amap>
  </div>
</template>

<script>
import test from './components/test.vue'
import {defineComponent} from "vue";
export default defineComponent({
  name: 'App',
  components: {
    test
  },
})
</script>

<style>
#app {
  height: 600px;
}
</style>

parentInstance的说明

parentInstance通过provide为所有子组件提供实例,parentInstance指向的是最近的一个提供【parentInstance】的vue组件,当前提供parentInstance的组件有以下几个

组件名称说明
el-amap地图组件,根组件存在,提供map实例
el-locaLoca容器,所有loca图层的容器,loca图层必须放在el-loca内
el-amap-layer-labels标号图层,只可以放el-amap-label组件
el-amap-layer-vector矢量图层,只可以放矢量的子图层
el-amap-layer-three三维图层,只可以放el-amap-three-gltf组件

2、组合式API 2.1.0+

2.1使用方法

首先需要导入 useRegister,useRegister的第一个参数是创建高德地图组件实例的回调方法,有两个参数,一个是props定义的所有属性和其对应的值,另一个是上级父组件的高德地图实例。 useRegister的第二个参数是一个TInitComponentProps类型,具体参数说明见下表。 useRegister会返回一个对象,包含两个属性,一个是$$getInstance用于获取高德SDK的实例,这个可以通过defineExpose开放出去,第二个是parentInstance,是上级的vue组件实例,可以获取常用的属性。

2.2基础示例代码

创建CustomMarker.vue组件

<script setup lang="ts">
  import {useRegister} from '@vuemap/vue-amap'

  defineProps({
    position: {
      type: Array,
      required: true
    }
  })

  const emits = defineEmits(['init'])
  let $amapComponent: AMap.Marker

  const {$$getInstance, parentInstance} = useRegister<AMap.Marker, any>((options, parentComponent) => {
    return new Promise<AMap.Marker>((resolve) => {
      $amapComponent = new AMap.Marker(options);
      parentComponent.add($amapComponent)
      resolve($amapComponent)
    })
  }, {
    emits,
    destroyComponent () {
      if ($amapComponent && parentInstance?.$amapComponent) {
        $amapComponent.setMap(null);
        $amapComponent = null as any;
      }
    },
  })

  defineExpose({
    $$getInstance
  })
</script>

<template>
  <div></div>
</template>

<style scoped>

</style>

地图加载代码

<script setup lang="ts">
  import {ref} from 'vue'
  import {ElAmap} from "@vuemap/vue-amap";
  import CustomMarker from "./components/CustomMarker.vue";

  const center = ref([120, 31]);
</script>

<template>
  <div style="height: 600px">
    <el-amap :center="center">
      <custom-marker :position="center"></custom-marker>
    </el-amap>
  </div>
</template>

<style scoped>
</style>

TInitComponentProps参数说明

参数名称说明
propsRedirect属性名称重定向,有些高德SDK的属性名会与vue默认的prop名称冲突,比如style,这时候就需要自己定义一个新的名称,并传入propsRedirect修改为高德SDK需要的名称。示例: { styles: 'style'}
emitsdefineEmits返回的值,一般至少需要一个init的事件
converts将props属性的值转化为高德需要的值,这个一般用于将经纬度转化为AMap.Lnglat等等,示例:{bounds: (path) => { return new AMap.Bounds(convertHelper.toLngLat(path[0]), convertHelper.toLngLat(path[1])); }}
watchRedirectFn重写对props属性变化监听的方法,默认情况下组件内部会查找高德SDK里属性的set方法,比如position会查找setPosition,但有些时候我们需要修改这个默认行为,那么就需要传入props名称,前面加上两个下划线,比如:{__position: () => { xxxx}},这样组件内部就不会再去找setPosition,而是直接使用__position
destroyComponent在销毁组件时需要调用的方法,一般用于从父级中移除对象,比如从高德SDK的地图实例中移除 marker的实例
最后更新时间:
贡献者: guyangyang, gyy
Next
包装地图组件