微信小程序腾讯地图bindregionchange事件导致图标闪烁的解决方法

最新推荐文章于 2024-10-30 17:30:27 发布

转载最新推荐文章于 2024-10-30 17:30:27 发布 · 2.1k 阅读

日常专栏收录该内容

2 篇文章

订阅专栏

本文介绍在微信小程序中使用腾讯地图放置图标时，如何避免地图中心改变导致图标闪烁的问题。通过优化bindregionchange函数，引入距离判断逻辑，确保只有当地图移动到一定距离外才重新加载图标，有效提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序中的腾讯地图，我们讲地图上放置一些图标，如共享单车的位置，如果我们在bindregionchange的函数中写入寻找图标位置的代码，我们启动后，或者移动地图的中心位置后，就会出现图标闪烁的现象，解决这个现象的方法为

例如我们写入的bindregionchange函数是：


 
   
    
   
   
    
       regionchange(e) {
    
   

   
    
   
   
    
         var that = this;
    
   

   
    
   
   
    
         if(e.type == "end") {
    
   

   
    
   
   
    
           that.mapCtx.getCenterLocation({
    
   

   
    
   
   
    
             success: function (res) {
    
   

   
    
   
   
    
               findBikes(that, res.longitude, res.latitude)
    
   

   
    
   
   
    
             }
    
   

   
    
   
   
    
           })
    
   

   
    
   
   
    
         }
    
   

   
    
   
   
    
       },

我们改为：


 
   
    
   
   
    
      regionchange(e) {
    
   

   
    
   
   
    
         var that = this;
    
   

   
    
   
   
    
         console.log(that)
    
   

   
    
   
   
    
         if (e.type == "end") {
    
   

   
    
   
   
    
           that.mapCtx.getCenterLocation({
    
   

   
    
   
   
    
             success: function (res) {
    
   

   
    
   
   
    
               var distance = getDistance(res.latitude, res.longitude, that.data.lat, that.data.log)
    
   

   
    
   
   
    
               console.log(distance)
    
   

   
    
   
   
    
               if ((res.latitude == that.data.lat && res.longitude == that.data.log) || distance 
     < 1) {
    
   

   
    
   
   
    
                 return;
    
   

   
    
   
   
    
               }
    
   

   
    
   
   
    
               findBikes(that, res.longitude, res.latitude)
    
   

   
    
   
   
    
             }
    
   

   
    
   
   
    
           })
    
   

   
    
   
   
    
         }
    
   

   
    
   
   
    
       },

最后我们在index.js的末尾添加一个函数：


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

   
    
   
   
     
    
   

   
    
   
   
    
         lat1 = lat1 || 
     0;
    
   

   
    
   
   
     
    
   

   
    
   
   
    
         lng1 = lng1 || 
     0;
    
   

   
    
   
   
     
    
   

   
    
   
   
    
         lat2 = lat2 || 
     0;
    
   

   
    
   
   
     
    
   

   
    
   
   
    
         lng2 = lng2 || 
     0;
    
   

   
    
   
   
     
    
   

   
    
   
   
    
         
     var rad1 = lat1 * 
     Math.PI / 
     180.0;
    
   

   
    
   
   
     
    
   

   
    
   
   
    
         
     var rad2 = lat2 * 
     Math.PI / 
     180.0;
    
   

   
    
   
   
     
    
   

   
    
   
   
    
         
     var a = rad1 - rad2;
    
   

   
    
   
   
     
    
   

   
    
   
   
    
         
     var b = lng1 * 
     Math.PI / 
     180.0 - lng2 * 
     Math.PI / 
     180.0;
    
   

   
    
   
   
     
    
   

   
    
   
   
    
         
     var r = 
     6378137;
    
   

   
    
   
   
        
    
   

   
    
   
   
    
         
     return (r * 
     2 * 
     Math.asin(
     Math.sqrt(
     Math.pow(
     Math.sin(a / 
     2), 
     2) + 
     Math.cos(rad1) * 
     Math.cos(rad2) * 
     Math.pow(
     Math.sin(b / 
     2), 
     2)))).toFixed(
     0)
    
   

   
    
   
   
     
    
   

   
    
   
   
    
       }