CrazyDz
CrazyDz
  • 发布:2019-05-29 11:57
  • 更新:2019-05-29 11:57
  • 阅读:2640

【报Bug】Map组件使用$getAppMap().onclick监听无效

分类:uni-app
map

详细问题描述

项目中需要实现点击地图,在点击坐标位置添加覆盖物功能,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

2019-05-29 11:57 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复