1. vue-leaflet-location-select

vue-leaflet-location-select

经纬度选择器

在线地址

开始

安装

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. 添加搜索列表功能

Dependencies