功能描述
地图拾取，仅限于地图拾取功能，未方便用户快速定位坐标使用， 不具备其他，例如： 圈区域，画路线等特定功能
地图打标记(pointType)分为如下3类
- 地图初始化， 根据用户经纬度（模糊定位， 不一定会准确）， 打标记 init
- 通过搜索框搜索， 会获取到 最多 20条记录， 会进行打标记 search
- 用户在地图上点击， 打标记 click
使用
<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
<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版本