收藏
回答

微信小程序map组件,地图加载后marker标记点ios设备不显示,怎么解决?

你们这个ios显示问题我看之前的贴子出现过很多次了android就没问题,为什么到现在解决不了,用户找到我们我们都不知道怎么办

清查看以下 addMarkers方法

iphone各个机型都有出现过,最新的14也出现过,请尽快回复

目标显示效果点聚合



const app = getApp();

const img = '../../image/the_cabinet_loaction.png'

const city = require('./../../utils/cityCode.js');

var bmap = require('../../libs/bmap-wx.js');

const api = require('../../api/api.js');

import {

   PHONE_TYPE,

   TOKEN

} from '../../config/appConfig';

/**

 * 首页地图

 */

Component({

   data: {

      barInfo: app.globalData.barInfo,

      latitude: '36.062007',

      longitude: '120.384893',

      markers: [], //个人位置

      cabinetMarkers: [], //换电柜marker

      batteryListData: [],

      batteryImg: '',

      batteryInfohidden: true,

      scanCabinetNumber: '', //扫描柜子租电池得到柜子编号

      cabinetData: [],

      selCabinetIndex: 0,

      certification: true, //是否实名认证

      timer: '',

      timer2: '',

      //第一次进入 是否交互完毕

      loadFristEnd: false,

      hiddenAgreement: true, //用户是否点击过用户协议的确定

      recentlyCabinet: null, //用户距离最近的换电柜

   },

   pageLifetimes: {

      show: function () {


         this.mapCtx = wx.createMapContext('mapId')


         if (typeof this.getTabBar === 'function' &&

            this.getTabBar()) {

            this.getTabBar().setData({

               selected: 0

            })

         };

         this.setData({

            barInfo: app.globalData.barInfo

         })



         this.getUserLocation()



         if (this.data.scanCabinetNumber != '') {

            this.getCabinetScanRent()

         }

      },

      detached: function () {

         this.endTimer(this.data.timer)

         this.endTimer(this.data.timer2)

      },

   },

   methods: {

      openuserprotocol: function () {

         wx.navigateTo({

            url: '../../packageB/pages/userAgreement/userAgreement',

         })

      },

      /**

       * 获取用户位置

       */

      getUserLocation: function () {

         var that = this

         var location = ''

         wx.getLocation({

            type: 'gcj02',

            isHighAccuracy: true,

            success(res) {

               if (that.data.timer2 != '') {

                  that.endTimer(that.data.timer2)

               }

               that.setData({

                  latitude: res.latitude,

                  longitude: res.longitude

               })

               location = res.latitude + ',' + res.longitude;

               //更新用户Markers

               that.onRefrshMarkers(location)

               if (that.data.loadFristEnd == false) {

                  //小程序第一次加载

                  wx.showLoading({

                     title: '正在加载资源...',

                     mask: true

                  });

                  that.data.timer2 = setInterval(

                     //开启一个定时器,防止第一次进入app.js获取的token不能及时获取

                     function () {

                        var token = wx.getStorageSync(TOKEN);

                        if (token !== null && that.data.loadFristEnd == false) {

                           wx.hideLoading();

                           that.setData({

                              loadFristEnd: true,

                           });


                           that.getOtherData(location);

                        }

                     }, 2000);

               } else {

                  that.getOtherData(location)

               }

            },

            fail: function (res) {

               wx.showToast({

                  title: '获取您的位置信息失败,请检查位置服务是否开启',

               })

            },

         })




      },

      getOtherData: function (params) {

         //获取用户城市信息

         this.getCityCode(params)

         //获取用户信息

         this.getUserMember()

         //获取用户电池数据

         this.getUserbatteryData()

         //开启定时器 每三分钟重启重新查询一遍电池信息

         this.startTimer()

      },


      startTimer: function () {

         if (this.data.timer != '') {

            this.endTimer(this.data.timer)

         }

         var that = this;

         that.data.timer = setInterval(

            function () {

               that.getUserbatteryData()

            }, 180000);

      },


      /**

       * 结束定时器

       */

      endTimer: function (params) {

         clearTimeout(params)

      },


      /**

       * 隐藏未实名认证提示

       * @param {*} params 

       */

      hintCertification: function (params) {

         this.setData({

            certification: true

         })

      },

      getUserMember: function (params) {

         var that = this

         api.userMember().then(res => {

            var certification = false

            if (res.body.member.isAuth == 1) {

               certification = true

            } else {

               certification = false

            }

            app.globalData.userAgreement = res.body.member.agreement

            that.setData({

               hiddenAgreement: res.body.member.agreement,

               certification: certification

            })

         })

      },

      bindItme: function (event) {

         let index = event.currentTarget.dataset.index;


         this.setData({

            selCabinetIndex: index

         })

      },

      /**

       * 选择套餐取消

       * @param {*} params 

       */

      selCabinetCanncel: function (params) {

         this.setData({

            cabinetData: []

         })

      },

      /**

       * 用户不同意协议

       */

      userprotocolCancel: function () {

         this.setData({

            hiddenAgreement: true

         })

      },

      /**

       * 用户同意协议

       */

      selCabinetConfirm: function () {

         this.setData({

            hiddenAgreement: true

         })

         api.agreement({}).then(res => {

            app.globalData.userAgreement = true

         })

      },

      /**

       * 选择套餐确定

       * @param {*} params 

       */

      selCabinetConfirm: function (params) {

         wx.navigateTo({

            url: '../../packageA/pages/batteryrental/batteryrental?batteryNumber=' + this.data.cabinetData[this.data.selCabinetIndex].batteryNumber,

         })

         this.setData({

            cabinetData: []

         })

      },

      /**

       * 扫获取电池数据

       * @param {*} params 

       */

      getCabinetScanRent: function (params) {

         var that = this

         api.cabinetScanRent({

            cabinetNumber: this.data.scanCabinetNumber

         }).then(res => {

            var map = new HashMap();

            res.body.list.forEach((item) => {

               if (!map.containsKey(item.batteryPlanId)) {

                  //不存在key

                  map.put(item.batteryPlanId, item)

               } else {

                  //存在key

                  var data = map.get(item.batteryPlanId)

                  if (parseInt(data.batteryCapacityPercent) < parseInt(item.batteryCapacityPercent)) {

                     map.remove(item.batteryPlanId)

                     map.put(item.batteryPlanId, item)

                  }

               }

            })

            that.setData({

               cabinetData: map.values()

            })

         })

         this.setData({

            scanCabinetNumber: '',

         })

      },

      /**

       * 查看详情

       * @param {*} params 

       */

      batteryinfo: function (params) {


         if (this.data.recentlyCabinet == null) {

            wx.navigateTo({

               url: '../../packageA/pages/batteryinfo/batteryInfo?battery=' +

                  JSON.stringify(this.data.batteryListData)

            })

         } else {

            wx.navigateTo({

               url: '../../packageA/pages/batteryinfo/batteryInfo?battery=' +

                  JSON.stringify(this.data.batteryListData) + '&minCabinetMarker=' + JSON.stringify(this.data.recentlyCabinet)

            })

         }



      },


      // 根据经纬度计算距离,参数分别为第一点的纬度,经度;第二点的纬度,经度

      getDistance: function (lat1, lng1, lat2, lng2) {


         var radLat1 = this.rad(lat1);

         var radLat2 = this.rad(lat2);

         var a = radLat1 - radLat2;

         var b = this.rad(lng1) - this.rad(lng2);

         var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +

            Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));

         s = s * 6378.137; // EARTH_RADIUS;

         s = Math.round(s * 10000) / 10000; //输出为公里


         var distance = s;

         var distance_str = "";


         if (parseInt(distance) >= 1) {

            distance_str = distance.toFixed(1) + "km";

         } else {

            distance_str = distance * 1000 + "m";

         }


         //s=s.toFixed(4);

         return s;

      },


      rad: function (d) {

         return d * Math.PI / 180.0;

      },

      /**

       * 获取用户数据

       */

      getUserbatteryData: function () {

         var that = this

         var batteryInfohidden

         api.batteryList().then(res => {

            wx.setStorageSync('batteryListData', JSON.stringify(res.body.pageResult.dataList))

            var batteryImg;

            if (res.body.pageResult.dataList.length == 0) {

               batteryInfohidden = true

            } else {

               batteryInfohidden = false

               var remainCapacity = parseInt(res.body.pageResult.dataList[0].remainCapacity)

               var marker = {

                  latitude: parseFloat(res.body.pageResult.dataList[0].gdLat),

                  longitude: parseFloat(res.body.pageResult.dataList[0].gdLon),

                  iconPath: '../../image/my_bar_icon.png',

                  width: '100rpx',

                  height: '90rpx',

               }

               //电池位置

               var newMarkers = that.data.markers;

               if (newMarkers.length != 1) {

                  newMarkers.splice(1, 1)

               }

               newMarkers.push(marker);

               this.setData({

                  markers: newMarkers

               })



               if (100 >= remainCapacity && remainCapacity >= 81) {

                  batteryImg = '../../image/home_bar_one_icon.png'

               } else if (80 >= remainCapacity && remainCapacity >= 61) {

                  batteryImg = '../../image/home_bar_two_icon.png'

               } else if (60 >= remainCapacity && remainCapacity >= 41) {

                  batteryImg = '../../image/home_bar_three_icon.png'

               } else if (40 >= remainCapacity && remainCapacity >= 21) {

                  batteryImg = '../../image/home_bar_fore_icon.png'

               } else if (20 >= remainCapacity && remainCapacity >= 0) {

                  batteryImg = '../../image/home_bar_five_icon.png'

               }

            }


            that.setData({

               batteryListData: res.body.pageResult.dataList,

               batteryImg: batteryImg,

               batteryInfohidden: batteryInfohidden

            })

         })

      },




      //刷新用户marker

      onRefrshMarkers: function (params) {

         var location = params.split(',')

         var marker = {

            latitude: parseFloat(location[0]),

            longitude: parseFloat(location[1]),

         }

         var newMarkers = []

         newMarkers.push(marker);

         this.setData({

            markers: newMarkers

         })

      },



      //根据地理坐标获取城市信息

      getCityCode: function (params) {

         //百度地图逆地理解析

         var BMap = new bmap.BMapWX({

            ak: 'NT5RGc7RNjH9qftVVmBMG5B80YkQQMbk'

         });

         var that = this;

         BMap.regeocoding({

            location: params,

            success: function (res) {

               //根据算法获取选中的城市code 

               const cityData = city.getDistinct(res.originalData.result.addressComponent.province, res.originalData.result.addressComponent.city, res.originalData.result.addressComponent.district);

               // 目前用省市区中的市作为接口调用的cityCode

               if (app.globalData.homePageSelCityData == cityData.cityCode) {

                  return

               }

               app.globalData.homePageSelCityData = cityData.cityCode

               that.getCabinetList(cityData.cityCode)

            },

            fail: function () {

               wx.showToast({

                  icon: 'none',

                  title: '请检查位置服务是否开启',

               })

            },

         });

      },

      /**

       * 获取。。。信息

       * @param {*} params 

       */

      getCabinetList: function (params) {

         var that = this

         api.cabinetList({

            cityCode: params,

         }).then(res => {

            that.getRecentlyMarker(res);

            that.addMarkers(res)

         })

      },

      /**

       * 获取用户最近。。。数据

       * @param {*} params 

       */

      getRecentlyMarker: function (params) {

         var newCabinetMarkers = []

         params.body.list.forEach((item) => {

            if (item.onLine && item.batteryCount != 0) {

               newCabinetMarkers.push(item)

            }

         })

         if (newCabinetMarkers.length == 0) {

           

         } else {

            //准备一个新的数组存放所有距离差值

            var Distance = []

            newCabinetMarkers.forEach((item) => {

               var latitude = item.bdLat == null ? parseFloat(item.gdLat) : parseFloat(item.bdLat);

               var longitude = item.bdLon == null ? parseFloat(item.gdLon) : parseFloat(item.bdLon);

               Distance.push(this.getDistance(this.data.markers[0].latitude, this.data.markers[0].longitude, latitude, longitude))

            })

            //最小距离

            var minNum = Math.min(...Distance)

            //最小距离下标

            var intdex = Distance.indexOf(minNum)

            var minCabinetMarker = newCabinetMarkers[intdex]

            app.globalData.recentlyCabinet = minCabinetMarker

            this.setData({

               recentlyCabinet: minCabinetMarker

            })


         }


      },

      /**

       * 点聚合

       * @param {*} params 

       */

      addMarkers: function (params) {

         var markerIds = []

         this.data.cabinetMarkers.forEach((item, i) => {

            markerIds.push(parseFloat(item.id))

         })

         this.mapCtx.removeMarkers({

            markerIds,

            clear: false,

            complete(res) {


            }

         })


         const markers = []

         params.body.list.forEach((item, i) => {

            const marker = {

               id: parseFloat(item.id),

               iconPath: img,

               width: 50,

               height: 50,

               latitude: item.bdLat == null ? parseFloat(item.gdLat) : parseFloat(item.bdLat),

               longitude: item.bdLon == null ? parseFloat(item.gdLon) : parseFloat(item.bdLon),

               joinCluster: true, // 指定了该参数才会参与聚合

               label: {

                  content: item.batteryCount.toString(),

                  fontSize: 15,

                  width: 50,

                  height: 50,

                  color: item.onLine ? '#ffffff' : '#2E579C',

                  bgColor: item.onLine ? '#2E579C' : '#D3D3D3',

                  borderRadius: 100,

                  textAlign: 'center',

                  anchorX: wx.getStorageSync(PHONE_TYPE) == 'android' ? -27 : -1,

                  anchorY: -52,

               }

            }

            markers.push(marker)

         })

         this.setData({

            cabinetMarkers: params.body.list

         })

         this.mapCtx.addMarkers({

            markers,

            clear: false,

            complete(res) {


            },

            success(){


            },

            fail(){

               wx.showModal({

                  title: '提示',

                  content: '很抱歉,。。。。。',

                  showCancel: false,

                  complete: (res) => {}

               })

            }

         })

      },

      onMarkerTap(e) {


      },


      /**

       * 换电柜详情

       * @param {*} e 

       */

      onLabelTap(e) {

         this.data.cabinetMarkers.forEach((item) => {

            if (item.id === e.markerId) {

               if (!item.onLine) {

                  wx.showModal({

                     title: '提示',

                     content: '当前换电柜不在线,请重新选择换电柜',

                     showCancel: false,

                     complete: (res) => {}

                  })

                  return

               }

               if (item.batteryCount == 0) {

                  wx.showModal({

                     title: '提示',

                     content: '当前换电柜内电池不可用或不与您的电池型号相同,请重新选择换电柜',

                     showCancel: false,

                     complete: (res) => {}

                  })

                  return

               }

               wx.navigateTo({

                  url: '../../packageA/pages/thecabinet/theCabinet?id=' + item.id + '&number=' + item.number,

               });

            }

         })

      }

   }

})


function HashMap() {

   //定义长度

   var length = 0;

   //创建一个对象

   var obj = new Object();


   //判断Map是否为空

   this.isEmpty = function () {

      return length == 0;

   }


   //判断对象中是否包含给定Key

   this.containsKey = function (key) {

      return (key in obj);

   }


   //判断对象中是否包含给定的Value

   this.containsValue = function (value) {

      for (var key in obj) {

         if (obj[key] == value) {

            return true;

         }

      }

      return false;

   }


   //向map中添加数据

   this.put = function (key, value) {

      if (!this.containsKey(key)) {

         length++;

      }

      obj[key] = value;

   }


   //根据给定的key获取Value

   this.get = function (key) {

      return this.containsKey(key) ? obj[key] : null;

   }


   //根据给定的Key删除一个值

   this.remove = function (key) {

      if (this.containsKey(key) && (delete obj[key])) {

         length--;

      }

   }


   //获得Map中所有的value

   this.values = function () {

      var _values = new Array();

      for (var key in obj) {

         _values.push(obj[key]);

      }

      return _values;

   }


   //获得Map中的所有key

   this.keySet = function () {

      var _keys = new Array();

      for (var key in obj) {

         _keys.push(key);

      }

      return _keys;

   }


   //获得Map的长度

   this.size = function () {

      return length;

   }


   //清空Map

   this.clear = function () {

      length = 0;

      obj = new Object();

   }


}



回答关注问题邀请回答
收藏

1 个回答

  • Demons
    Demons
    2023-03-23

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2023-03-23
    有用
    回复
登录 后发表内容