vue-map-coord
基于 vue3 和高德地图的坐标拾取工具,具有坐标查询,地址查询,坐标拾取等功能、
效果展示
安装
NPM
npm install vue-map-coord --save
Yarn
yan add element-plus
browser
<script src="https://unpkg.com/browse/vue-map-coord/dist/coord-map.umd.js"></script>
组件配置
属性
-
mapKey
高德地图 key
// 类型 type: string; // 是否必选 required: true;
-
position
默认经纬度坐标
// 类型 type:string|number[]; //[lng,lat] // 是否必选 required:false;
-
mapConfig
地图组件配置项
// 类型 type:{ width?:string, //地图宽度 height?:string, //地图高度 center?:number[], //地图中心 如传入position属性 则默认以position为地图中心坐标 zoom?:number, //地图层级 satellite?:boolean, //是否开启卫星图 }; // 默认值 default:{ width:'100%', height:'100%', satellite:false, zoom:10 }; // 是否必选 required:false;
事件
-
onCoordChange
当点位地址变化时触发的事件
// 回调参数 { lng:string|number, //经度 lat:string|number, //纬度 position:string|number[], //经纬度数组[经度,纬度] address:Address, //地址对象 formattedAddress:string //地址 }; // address类型 interface Address{ addressComponent: { citycode:string, adcode:string, businessAreas:string[], neighborhoodType:string, neighborhood: string, province: string, street: string, streetNumber: string, township: string }, crosses: string[], formattedAddress: string, pois: string[], roads: string[] };
方法
-
resetMap
重置地图状态
// 参数 posClear?:boolean //default:false 是否强行清除所有状态,如果组件传入position属性,默认不重置点位及地址数据
-
destroyMap
重置并销毁地图
注意项
组件所在容器需设置高度,或者在配置项属性里设置组件的高度
使用
注册组件
- 全局组件注册
install
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import CoordMap from "vue-map-coord";
const app = createApp(App);
app.use(CoordMap);
app.mount("#app");
- 单个.vue 文件局部注册
// Options API 方式
<script>
import { CoordMap } from "vue-map-coord";
export default {
components: {
CoordMap,
},
};
</script>
// Composition API 方式
<script setup>
import { CoordMap } from "vue-map-coord";
</script>
使用组件
<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>