# vue-location-selector

**Repository Path**: zxhm/vue-location-selector

## Basic Information

- **Project Name**: vue-location-selector
- **Description**: VUE位置选择插件，范围WGS84经纬度坐标以及地址，可选用高德地图或天地图作为底图 
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2019-11-27
- **Last Updated**: 2024-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-location-selector

> A Vue plugin to select location on map

## Usage

### 1. install

```shell
npm install git+https://github.com/zxhm001/vue-location-selector.git --save
```

### 2. in main.js

```js
import locationSelector from 'vue-location-selector'
Vue.use(locationSelector)
```

### 3. in .vue

```html
<location-selector basemap="tianditu" @change="handleChange" amapKey="$amapKEY"/>
<script>
  export default {
    ...
    methods:{
      handleChange(position){
        console.log('position:', position)
      }
    }
    ...
  }
</script>
```

The location result in param of the callback bind to change event looks like beblow when "change" event fired.

```js
{
  address: '浙江省宁波市宁海县茶院乡科技路',
  lat: 29.28025612868752,
  lng: 29.28025612868752
}
```

## Props

prop    |type   |value        |  descrption
:---|:---|:---|:---
basemap |String |tianditu,amap|the type of the base map
initLng |Number | - | the langitude of the center in the inited map
initLat |Number | - | the latitude of the center in the inited map
amapKey |String | - | 高德底图WEBAPIKEY，用于地理反编码，需要自行申请

## Events

event name  | event value             | description
:---|:---|:---
change      |Object,{address,lat,lng} | the result of the choosen position

## Demo

![demo][1]

## Contributors

- ZXHM
- [dicl](https://github.com/DiclZYY)

How to contribute?

Contact with the author "zxh" and the maintainer "dicl" to get the permission.

## Licence

MIT

[1]: ./example/images/demo.jpg "have a look of demo"