map-pick-position
v0.0.2
Published
腾讯地图选点
Downloads
4
Maintainers
Readme
功能描述
地图拾取,仅限于地图拾取功能,未方便用户快速定位坐标使用, 不具备其他,例如: 圈区域,画路线等特定功能
地图打标记(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版本