公告列表
公告列表
收藏
回答

微信小程序体验版 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>
最后一次编辑于  2020-10-08
回答关注问题邀请回答
收藏

2 个回答

  • Cjiang
    Cjiang
    2020-10-09

    你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）

    2020-10-09
    有用
    回复 6
    查看更多(1)
  • 付
    付
    2020-10-08

    升级组件到最新版本。

    2020-10-08
    有用
    回复 4
    • 杨高兴
      杨高兴
      2020-10-08
      您好，是指将Hbuilderx或是微信开发者工具升级到最新版本吗？
      2020-10-08
      赞
      回复
    • 付
      付
      2020-10-09回复杨高兴
      哦 你用的是Hbuilderx呀 哪都升级一下 同时删除Hbuilderx的unpackage目录，重新生成一下
      2020-10-09
      赞 1
      回复
    • 付
      付
      2020-10-09
      Hbuilderx 不是最新 问题会很多
      2020-10-09
      赞 1
      回复
    • 杨高兴
      杨高兴
      2020-10-09回复付
      好的
      2020-10-09
      赞
      回复
请 登录 后发表内容
相关问题
相关文档
问题标签
体验版mapmarkeriphone6iphone