1.0.4 • Published 2 years ago
地图组件使用说明
效果演示
使用
// 在 main.js 引入并注册
//全局引入
const VueMapMobile = require("vue-map-mobile")
Vue.use(VueMapMobile)
如何使用
<button @click="handleShowMap">测试展示打开地图定位</button>
<vue-map-mobile ref="map" />
methods:{
handleShowMap(){
this.$refs.map.showMap()
}
}
props
| name | 描述 | 默认值 | 类型 |
|---|
| ak | 百度地图的ak | 'vdYSdGwwYSskmY0tpjhnamiiPvhSHQXH' | String |
| aroundKeyword | 周围位置的关键字 | "楼", "公司", "小区", "学校", "餐饮" | Array |
| positionImg | 当前位置的图标（默认是引用插件本身的图标，可替换为在线图标url地址）如：'https:XXXX.png' | require("../assets/img/common/map_local@2x.png") | String |
| backPositionImg | 回到当前位置的图标（默认是引用插件本身的图标，可替换为在线图标url地址）如：'https:XXXX.png' | require("../assets/img/common/map_back_local@2x.png") | String |
| confirmText | 查询的确定按钮 | '确定' | String |
| cancelText | 关闭地区弹窗按钮文本 | '取消' | String |
| zoomLevel | 地图缩放级别 | 20 | Number |
| dragendFlag | 是否开启拖拽功能 | true | Boolean |
| clickFlag | 是否开启点击地图功能 | false | Boolean |
API
属性方法
传值方法
this.$emit("confirm", this.currentAddress,this.point)
| 方法 | 描述 |
|---|
| confirm | 确定选择了地址和当前的经纬度 |
this.$emit("cancel")
this.$emit("mapClick",e)
| 方法 | 描述 |
|---|
| mapClick | 点击地图的方法（只有clickFlag为true时才有这个方法） |