个性化网站建设公司电话,做网站基础教程,做网站搞流量挂联盟广告变现,个人网站的成本vue baidu-map手机端点击事件无效
解题思路
手机端 禁用地图拖拽 click事件就会被触发 触摸结束 -- 开启 禁止拖拽 触摸移动中 -- 开启 启用拖拽
我参考的解决办法
https://blog.csdn.net/Davis_Dxs/article/details/82425211 在vue baidu-map 实现 !DOCTYPE h…vue baidu-map手机端点击事件无效
解题思路
手机端 禁用地图拖拽 click事件就会被触发 触摸结束 -- 开启 禁止拖拽 触摸移动中 -- 开启 启用拖拽
我参考的解决办法
https://blog.csdn.net/Davis_Dxs/article/details/82425211 在vue baidu-map 实现 !DOCTYPE html
html langenhead
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
link relstylesheet href../css/element.css
title地图/title
style
.map {
height: 400px;
}.searchMap {
max-height: 300px
}
/style
/headbody
div idmain
解决app端点击地图无法生效
div
地址
el-input placeholder请输入搜索地址 prefix-iconel-icon-search v-modelmapConfig.keyword
classinput-with-select
el-button slotappend iconel-icon-search/el-button
/el-input
/div
div
地址
el-input placeholder当前选中地址 prefix-iconel-icon-location v-modelmapConfig.chooseAddress
classinput-with-select
/el-input
/div
baidu-map :centermapConfig.center :draggingmapConfig.dragging :scroll-wheel-zoomtrue
:zoommapConfig.zoom clickgetPoint readyonBaiduMapReady touchendmapTouchend
touchmovemapTouchmove classbm-view
bm-view classmap/bm-view
bm-marker :draggingtrue :positionmapConfig.position dragendgetPoint
bm-info-window :showmapConfig.showMark stylefont-size: 14px v-on:closeinfoWindowClose
p地址{{ mapConfig.markAddress }}/p
/bm-info-window
/bm-marker
bm-local-search :auto-viewporttrue :keywordmapConfig.keyword infohtmlsethandelSearch
classsearchMap/bm-local-search
/baidu-map
/div
script src../js/vue.js/script
script src../js/element.js/scriptscript src../js/baidu-map0.21.2.js/scriptscript
Vue.use(VueBaiduMap.default, {
ak: 你的ak
})
var app new Vue({
el: #main,
data: {
mapConfig: {
zoom: 15,
dragging: false,
center: {}, //地图中心
position: {}, //定位
showMark: false,
markAddress: , //点击地图获得的地址
loaction: , //搜索的城市
keyword: , //详细地址
chooseAddress: //详细地址
}},
methods: {
//触摸移动时触发此事件
mapTouchmove(e) {
this.mapConfig.dragging true
},
//触摸结束时触发此事件
mapTouchend(e) {
this.mapConfig.dragging false
},
//点击地图
getPoint(e) {
let geocoder new BMap.Geocoder() //创建地址解析器的实例
geocoder.getLocation(e.point, rs {
//地址描述
this.mapConfig.position e.point
this.mapConfig.chooseAddress rs.address
this.mapConfig.markAddress rs.address
})
this.mapConfig.showMark true
},
//关闭mark层
infoWindowClose() {
this.mapConfig.showMark false
},
//点击搜索的地区
handelSearch(e) {
this.mapConfig.chooseAddress (e.province || ) (e.city || ) e.address
},
//地图初始化时,定位当前位置
onBaiduMapReady(e) {
const that this
this.BMap e.BMap
if (this.BMap) {
const geolocation new this.BMap.Geolocation()
geolocation.getCurrentPosition(res {
const { lng, lat } res.point
this.mapConfig.center res.point
this.mapConfig.position res.point
const { province, city, district, street, street_number } res.address
this.mapConfig.keyword province city
})
}
},
/*地图方法*/
}
})
/script
/body/html
