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"><CoordMapref="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" }}><CoordMapref={CoordMapRef}mapKey='高德地图key'onCoordChange={onCoordChange}position={position}/></div>);
};

组件配置

注意项

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

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

Ant design Of Vue vue-amap 高德地图选点组件
参考链接: Vue(vue-amap) 接入高德地图获取坐标与地址信息 'AMapUI' is not defined 异常的话按照这个处理,没有异常就可以不用看 tips1: 本组件直接将main ...
amap vueamap 与_vue 使用高德地图vue-amap组件过程解析
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下首先 npm install -S ...
基于 React hooks + Typescript + Cesium 实现坐标拾取功能组件
功能介绍本例子基于 react hooks + ts + Cesium 实现坐标拾取组件:实现 WGS 84 经纬度.大地2000 经纬度.大地2000 投影坐标的获取并展示,封装对应的 Pick ...
vue2百度地图选点组件
vue2百度地图选点组件代码块 loadMap.js 组件markerMap.vue 使用代码块 loadMap.js /*** 动态加载百度地图api函数* @param {String} ak ...
vue 使用高德地图（vue-amap）记录
vue 使用高德地图 (vue-amap)记录效果图第一步下载vue-amap依赖: npm install vue-amap --save 高德地图ui:https://lbs.amap.co ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...

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

效果

安装

使用示例

组件配置

注意项

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

最新文章

热门文章