详细问题描述
项目中需要实现点击地图,在点击坐标位置添加覆盖物功能,MAP组件的@tap无法获取到点击地点的坐标,因而使用了$getAppMap().onclick获取地图对象并添加点击事件监听,真机运行时发现安卓端onclick不能100%触发,每次页面onready后添加onclick监听,偶尔能生效
[内容]
重现步骤
[步骤]
1、真机运行
2、点击地图
3、查看onclick响应
[结果]
无法100%触发
[期望]
onclick时间能正常监听
[如果语言难以表述清晰,拍一个视频或截图,有图有真相]
IDE运行环境说明
[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
HBuilderX
[IDE版本号]
1.9.9.20190522
[windows版本号]
Window10 家庭中文版
[mac版本号]
uni-app运行环境说明
[运行端是h5或app或某个小程序?]
app
[运行端版本号]
[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
HBuilderX创建
[编译模式是老模板模式还是新的自定义组件模式?]
自定义组件模式
App运行环境说明
[Android版本号]
8.1.0
[iOS版本号]
[手机型号]
小米8
[模拟器型号]
附件
[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]
[App安装包或H5地址]
[可重现代码片段]
<template>
<view class="login_content">
<view class="uni-status-bar"></view>
<view class="header">
<image class="header_left" src="../../static/img/back.png" @click="navigateBack"></image>
添加电子围栏
<image class="header_right" src="../../static/img/save.png" @click="navagateToAddFence"></image>
</view>
<map id="myMap" :latitude="center_lat" :longitude="center_lng" scale=14 @click="mapClick" >
</map>
<view style="height: 80upx;padding-top:15upx;font-size: 24upx;color: #61BCED;line-height: 80upx;">
<view style="float: left;width: 100upx;text-align: right;">500m</view>
<view class="" style="float: left;width: 550upx;">
<slider @changing="sliderChange" value="50" min="500" max="5000" step="100" :value="radius" activeColor="#61bced" backgroundColor="#b5b6b5" block-color="#ffffff" block-size="40" />
</view>
<view style="float: right;width: 100upx;">5km</view>
</view>
</view>
</template>
<script>
var view = null;
var map = null;
var circleObj=null;
var markerObj=null;
export default {
data() {
return {
radius:500,
center_lng: 119.28457,
center_lat: 26.090683
}
},
methods: {
navigateBack() {
uni.navigateBack({});
},
changeCircleCenter(e) {
console.log(e);
var that = this;
},
navigateToCommand() {
this.detailHidden();
uni.navigateTo({
url: '../command/command'
})
},
navigateToAlarm() {
this.detailHidden();
uni.navigateTo({
url: '../alarm/alarm'
})
},
sliderChange(e){
if(circleObj){
circleObj.setRadius(e.detail.value);
this.radius=e.detail.value;
}
},
getUserPosition() {
console.log("get position");
uni.getLocation({
type: 'gcj02',
success: function(res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
}
});
},
mapClick(e){
console.log(e);
},
setCircle() {
var that = this;
if(!circleObj){
circleObj = new plus.maps.Circle(new plus.maps.Point(that.center_lng, that.center_lat), that.radius);
circleObj.setFillColor("#61BCED");
circleObj.setFillOpacity(0.5);
circleObj.setStrokeColor("#61BCED");
map.addOverlay(circleObj);
}
// if(!markerObj){
// markerObj = new plus.maps.Marker(new plus.maps.Point(that.center_lng, that.center_lat));
// markerObj.setIcon("/static/img/circle_center.png");
// map.addOverlay(markerObj);
// }
}
},
onReady() {
var that = this;
map = uni.createMapContext("myMap", this).$getAppMap();
// map.onstatuschanged = function(e) {
// console.log(e);
// };
that.setCircle();
setTimeout(function(){
console.log("add listener");
map.onclick=function(e){
map.setCenter(e);
circleObj.setCenter(e);
}
},5000);
}
}
</script>
<style>
page {
height: 100%;
}
map {
width: 750upx;
height: calc(100% - 88upx - var(--status-bar-height) - 100upx );
position: relative;
}
.header {
height: 89upx;
padding: 0upx 16upx;
line-height: 89upx;
color: #ffffff;
font-weight: bold;
font-size: 36upx;
background: #61bced;
margin-top: -1upx;
}
.header_left {
width: 88upx;
height: 88upx;
float: left;
}
.header_right {
width: 88upx;
height: 88upx;
float: right;
}
.login_content {
width: 100%;
height: 100%;
display: flex;
flex: 1;
flex-direction: column;
}
.nav_div {
background: #26b3ff;
width: 690upx;
position: fixed;
bottom: 30upx;
height: 88upx;
left: 30upx;
border-radius: 10upx;
}
.track_icon {
width: 64upx;
height: 64upx;
position: absolute;
bottom: 42upx;
left: 50upx;
}
.track_text {
width: 98upx;
position: absolute;
bottom: 42upx;
height: 64upx;
left: 120upx;
border-radius: 10upx;
color: #fff;
font-size: 28upx
}
.position_icon {
width: 64upx;
height: 64upx;
position: absolute;
bottom: 42upx;
left: 220upx;
}
.position_text {
width: 98upx;
position: absolute;
bottom: 42upx;
height: 64upx;
left: 290upx;
border-radius: 10upx;
color: #fff;
font-size: 28upx
}
.command_icon {
width: 64upx;
height: 64upx;
position: absolute;
bottom: 42upx;
left: 395upx;
}
.command_text {
width: 98upx;
position: absolute;
bottom: 42upx;
height: 64upx;
left: 465upx;
border-radius: 10upx;
color: #fff;
font-size: 28upx
}
.person_icon {
width: 64upx;
height: 64upx;
position: absolute;
bottom: 42upx;
left: 565upx;
}
.person_text {
width: 98upx;
position: absolute;
bottom: 42upx;
height: 64upx;
left: 635upx;
border-radius: 10upx;
color: #fff;
font-size: 28upx
}
</style>
联系方式
[QQ]38631647
0 个回复