vue/react高德地图选点组件（坐标拾取工具）

一些项目会常用到这个功能，把自己做的组件分享一下，vue版和react版都有

vue版 github地址 （vue3）

react版 github地址

效果

安装

vue: npm install vue-map-coord --save

react: npm install react-map-coord --save

使用示例

vue:

<script setup>
import { ref, watchEffect } from "vue";
import CoordMap, { CoordChangeProps, CoordMapExpose } from "vue-map-coord";

const onCoordChange = (value: CoordChangeProps) => {
  console.log(value);
};
const position = ref([120.405985, 36.120701]);
const CoordMapRef = ref<CoordMapExpose>();
watchEffect(() => {
  console.log(position.value);
});
</script>

<template>
  <div style="height:600px">
    <CoordMap
      ref="CoordMapRef"
      mapKey="高德地图key"
      @onCoordChange="onCoordChange"
      v-model:position="position"
    />
  </div>
</template>

react:

import React, { useRef, useState } from "react";
import CoordMap, { CoordChangeProps, CoordMapExpose } from "react-map-coord";

const Example = () => {
  const onCoordChange = (value: CoordChangeProps) => {
    console.log(value);
  };
  const [position, setPosition] = useState([120.405985, 36.120701]);
  const CoordMapRef = useRef<CoordMapExpose>();

  return (
      <div style={{ height: "600px" }}>
        <CoordMap
          ref={CoordMapRef}
          mapKey='高德地图key'
          onCoordChange={onCoordChange}
          position={position}
        />
      </div>
  );
};

组件配置

注意项

组件所在容器需设置高度，或者在配置项属性里设置组件的高度