vue/react高德地图选点组件（坐标拾取工具）_高德地图坐标拾取器-优快云博客

这篇博客分享了一个适用于Vue3和React的组件——vue-map-coord和react-map-coord，用于地图坐标操作。提供了安装和使用示例，包括在Vue中监听坐标变化和在React中设置地图初始位置。注意组件需要容器设置高度。

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

效果

使用示例

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>
  );
};