# map-pick-position

**Repository Path**: luoriwusheng/map-pick-position

## Basic Information

- **Project Name**: map-pick-position
- **Description**: 地图选点
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-06
- **Last Updated**: 2023-09-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 功能描述
> 地图拾取，仅限于地图拾取功能，未方便用户快速定位坐标使用， 不具备其他，例如： 圈区域，画路线等特定功能

地图打标记(pointType)分为如下3类

- 地图初始化， 根据用户经纬度（模糊定位， 不一定会准确）， 打标记 init
- 通过搜索框搜索， 会获取到 最多 20条记录， 会进行打标记 search
- 用户在地图上点击， 打标记 click

### 使用

```html
<template>
    <div>
        <!-- 地图选点组件 -->
        <pick-map-position
            v-if="isShowMapModal"
            :isShowMapModal.sync="isShowMapModal"
            :defaultPosition='defaultPosition'
            @updatePosition="updatePosition"
            appKey='开发者key'
        />
    </div>
</template>

<script>
import PickMapPosition from './xxxx/pick-map-position'

export default {
    components: {
        PickMapPosition
    },

    data() {
        return {
            isShowMapModal: false,
            defaultPosition: {
                lat: 'xxx',
                lng: 'xxx'
            },

            // 用户自己场景下的对象
            formModel: {
                lng: '',
                lat: ''
            }
        }

    },
    methods: {
        updatePosition(data) {
            this.formModel.lng = data.lng
            this.formModel.lat = data.lat
            this.isShowMapModal = false
        }
    }
}
</script>
```

slot - label

```html
<template>
    <div>
        <!-- 地图选点组件 -->
        <MapPickPostion
            v-if="isShowMapModal"
            :isShowMapModal.sync="isShowMapModal"
            :defaultPosition='defaultPosition'
            @updatePosition="updatePosition"
            appKey='开发者key'
        >
            <template #label='{data}'>
                <div>组件内的数据</div>
            </template>
        </MapPickPostion>
    </div>
</template>

```



### 代码结构说明

```
- index.vue 组件主入口
- events.js 所有的事件注册
- registerPlugins.js 所有的控件注册
- index.less 部分简单的样式
```


### 组件属性

| 参数               | 类型      | 默认值   | 描述                                            |
|-------------------|---------|-------|-----------------------------------------------|
| mousemovePosition | Boolean | false | 鼠标移动，实时在旁边展示经纬度                               |
| limitPOI          | Boolean | false | 点击的点存在 poi信息，才会提示， 默认false,则 打开的信息弹窗是没有『名称』的 |
| appkey            | String  |       | 腾讯地图开发者key                                           |
| isShowMapModal     | Boolean | false | 是否显示腾讯地图  推荐父组件调用使用 v-if, 避免维护弹窗内部状态 |
| defaultPosition   | Object  |       | 打开地图默认的经纬度， 传入一个对象 {lat: 2, lng: 12.22}      |


### 组件方法

| 方法名            | 回调参数     | 描述   |
|----------------|----------|------|
| updatePosition | lat      | 纬度   |
|                | lng      | 经度   |
|                | province | 省    |
|                | city     | 市    |
|                | district | 区    |
|                | addr     | 具体位置 |
|                | adcode   | 行政ID |




### rollup插件版本说明

- rollup-plugin-vue vue2.x使用5.x版本 vue3使用6.x版本