一款基于vue构建的经纬度选择器（ts编写）

经纬度选择器

在线地址

开始

安装

npm install vue-leaflet-location-select
or
yarn add vue-leaflet-location-select

使用

import SelectLocation from "vue-leaflet-location-select";
import "vue-leaflet-location-select/library/vue-leaflet-location-select.css";
// 组件内部同步加载
components: {'select-location': SelectLocation}
// 组件内部异步加载
components： { 'my-component': () => import('vue-leaflet-location-select')}
}
<template lang="pug">
    div
        p 定位组件
        div(style="width: 480px; height: 28px; margin: 0 auto")
            select-location(v-model="location" :width="480" dialogWidth="600px" :toFixedNum="8")
    
</template>

props

参数名	类型	描述	默认值	必须
mapConfig	MapConfig	地图加载的一些配置	--	是
value（v-model）	Array	组件的值	[]	是
mapId	String	map标识	'map'	否
dialogWidth	String	弹框宽度	'600px'	否
toFixedNum	Number	经纬度有效位	6	否
isInput	Boolean	是否显示输入框(特定场合只用定位功能)	true	否
disable	Boolean	组件禁用	false	否
width	Number	组件宽度	320	否
customSearchFunction	() => void	自定义搜索函数(返回数据必须是BaseLocation类型数组)	(searchStr):BaseLocation[] => {return []}	否

BaseLocation

location: string = ''; // 具体位置经度在前， 维度在后 "120.22132,30.207384"
detailAddress?: string = ""; // 拼接出的详细地址
name?: string = ""; // 聚光中心

MapConfig

mapCenter: Array<number | string>  = [30.257881, 120.195923]; // 地图默认中心点
url?: string = "http://{s}.tile.osm.org/{z}/{x}/{y}.png";
maxZoom?: number = 18; // 最大缩放
minZoom?: number = 5; // 最效缩放
zoom?: number = 14; // 默认缩放
isSearch?: boolean = true;
searchConfigKey?: string = '9cb097cec23e465d5916ef63f23798db'; // 地图搜索应用key
searchConfigUrl?: string = 'http://restapi.amap.com/v3/place/text';

event

事件名	参数类型	描述
input	String[]	value修改

method

事件名	参数类型	描述
clearValue	--	清楚value
destroyMap	--	销毁地图

slot

名称	描述
customContent	地图自定义内容

提示

1. 组件内部集成leaflet.js，不建议使用全局注册，按需加载即可。
2. 地图定位使用EPSG3857坐标。
3. 组价基于elementui。

版本更迭

1. 数据流修改为双向绑定；
2. 添加搜索列表功能