vue-map-mobile

地图组件使用说明

效果演示

使用

// 在 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/[e-mail]")	String
backPositionImg	回到当前位置的图标（默认是引用插件本身的图标，可替换为在线图标url地址）如：'https:XXXX.png'	require("../assets/img/common/[e-mail]")	String
confirmText	查询的确定按钮	'确定'	String
cancelText	关闭地区弹窗按钮文本	'取消'	String
zoomLevel	地图缩放级别	20	Number
dragendFlag	是否开启拖拽功能	true	Boolean
clickFlag	是否开启点击地图功能	false	Boolean

API

name	描述	参数
showMap	展示地图	无

属性方法

传值方法

 this.$emit("confirm", this.currentAddress,this.point)

方法	描述
confirm	确定选择了地址和当前的经纬度

 this.$emit("cancel")

方法	描述
cancel	取消

 this.$emit("mapClick",e)

方法	描述
mapClick	点击地图的方法（只有clickFlag为true时才有这个方法）