收藏
回答

微信小程序体验版 map组件缩放后不显示marker与气泡的bug

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug map组件 微信iOS客户端 7.0.1.7 wechatlib:2.13.1(2020.9.28 19:58:13)


微信小程序体验版 map组件缩放后不显示marker与气泡的bug

多种机型尝试均正常(iphone6s plus、iphone11、iphoneXR、安卓部分机型、iphone8均正常),iphone11pro 缩放无法显示标记地点与气泡


<template> <!-- 地图找房组件 --> <view class="findroom"> <map id="map" :longitude="longitude" :latitude="latitude" :style="{ height: mapHeight + 'px' }" style="width:100%;" :scale="scale" :markers="markers" @regionchange="changeregion" show-location @markertap="markertap" @callouttap="callouttap" @controltap="controltap" @labeltap="labeltap" :polyline="polyline"></map> </view> </template> <script> import { getParamStrFromObj, getURIComponent, getJsonParse, location, reqHeader, shareOptions } from '@/common/custom.js'; // 导入接口地址文件 import API from '@/common/api.js'; var _self; var QQMapWX = require('../../common/mapServer/qqmap-wx-jssdk.js'); var qqmapsdk; export default { data() { return { static: this.$imgBaseUrl, //地图高度 mapHeight: '', //缩放比 scale: 10, //标记点数组 markers: [], //路线 polyline: '', entrancetype: '', ismap: false, mapobj: {}, longitude: '', latitude: '', isgomarkerDetail: false }; }, onLoad() { _self = this; qqmapsdk = new QQMapWX({ key: 'WTLBZ-BAK35-BW3IF-QRLUM-W24E2-L2BN4' }); // 使用 wx.createMapContext 获取 map 上下文 _self.mapobj = wx.createMapContext('map'); _self.getlngandlat(); _self.getentrancetype(); _self.getmapheight(); }, methods: { async getlngandlat() { // console.log("currentcity",uni.getStorageSync('changecity') ? uni.getStorageSync('changecity') : uni.getStorageSync('city')) // qqmapsdk.geocoder({ // //获取表单传入地址 // address: uni.getStorageSync('changecity') ? uni.getStorageSync('changecity') : uni.getStorageSync('city'), //地址参数,例:固定地址,address: '北京市海淀区彩和坊路海淀西大街74号' // success: function(res) { // //成功后的回调 // console.log('逆地址解析', res); // _self.longitude = res.result.location.lng; // _self.latitude = res.result.location.lat; // //根据地址解析在地图上标记解析地址位置 // }, // fail: function(error) { // console.error(error); // }, // complete: function(res) { // console.log(res); // } // }); console.log("changecity", uni.getStorageSync('changecity')) console.log("city", uni.getStorageSync('city')) try { const res = await _self.$req.ajax({ path: API.city_coordinate, data: { city: uni.getStorageSync('changecity') ? uni.getStorageSync('changecity') : uni.getStorageSync('city'), } }); let { data, code } = res.data; if (code) { console.log('查询经纬度坐标', res); _self.latitude = data.lat _self.longitude = data.lng _self.getmarker(); } else { uni.showToast({ title: '加载失败', icon: 'none' }); } } catch (e) { //TODO handle the exception console.log('exception', e); } }, //获取入口类型(1新房、2二手房、3家具) //根据不同入口类型 呈现不同数据 getentrancetype() { _self.entrancetype = uni.getStorageSync('entrancetype'); console.log('entrancetype', _self.entrancetype); }, //点击标记点时触发 markertap(e) { console.log(e.detail); }, callouttap(e) { console.log(e.detail); }, controltap(e) { console.log(e.detail); }, labeltap(e) { console.log(e.detail); if (_self.isgomarkerDetail) { uni.navigateTo({ url: "/pages/housingdetails/housingdetails?estate_id=" + e.detail.markerId }) } else { } }, //获取地图高度 getmapheight() { _self.mapHeight = uni.getSystemInfoSync().windowHeight; }, changeregion(e) { if (e.causedBy == 'scale') { // 获取地图位置改变后的中心点经纬度以及获取中心点附近的位置信息 _self.mapobj.getScale({ success: res => { if (res.scale >= 9 && res.scale <= 18) { console.log('具体绘制:', res.scale); _self.getmarker2(); _self.isgomarkerDetail = true } else { console.log('区域绘制', res.scale); _self.getmarker(); _self.isgomarkerDetail = false } } }); } else { console.log('其余事件不执行逻辑'); } }, //获取标记点 async getmarker() { try { const res = await _self.$req.ajax({ path: API.map_for_house, data: { city: uni.getStorageSync('regioninfo').regionId ? uni.getStorageSync('regioninfo').regionId : uni.getStorageSync( 'code'), type: _self.entrancetype } }); let { data, code } = res.data; if (code) { console.log('标记点', res); _self.markers = res.data.data.city.map(item => ({ id: item.estate_id, iconPath: _self.static + '/coordinate.png', latitude: item.lat, longitude: item.lng, width: '86', height: '86', a_code: item.a_code, label: { content: item.city + '\n' + item.num, color: '#333333', textAlign: 'center', anchorY: -60 } })); _self.ismap = true; console.log('markers', _self.markers); } else { uni.showToast({ title: '加载失败', icon: 'none' }); } } catch (e) { //TODO handle the exception console.log('exception', e); } }, //获取标记点 async getmarker2() { try { const res = await _self.$req.ajax({ path: API.map_for_house, data: { city: uni.getStorageSync('regioninfo').regionId, type: _self.entrancetype } }); let { data, code } = res.data; if (code) { console.log('标记点', res); _self.markers = res.data.data.item.map(item => ({ id: item.estate_id, iconPath: _self.static + '/coordinate.png', latitude: item.lat, longitude: item.lng, width: '86', height: '86', a_code: item.a_code, label: { content: item.name, color: '#333333', textAlign: 'center', anchorY: -50 } })); _self.ismap = true; console.log('markers', _self.markers); } else { uni.showToast({ title: '加载失败', icon: 'none' }); } } catch (e) { //TODO handle the exception console.log('exception', e); } } } }; </script> <style></style>
最后一次编辑于  10-08
回答关注问题邀请回答
收藏

2 个回答

登录 后发表内容
问题标签