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

掉渣的李大哥

已于 2022-11-27 01:01:43 修改

阅读量2.1k

点赞数

文章标签： vue.js 前端 reactjs

于 2022-11-27 00:32:10 首次发布

本文链接：https://blog.csdn.net/cs12558/article/details/128059130

版权

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

摘要由CSDN通过智能技术生成

一些项目会常用到这个功能，把自己做的组件分享一下，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>
  );
};