APP map 经纬度多再次赋值地图显示空白

分类：uni-app

问题反馈 uniapp bug已修复

uniapp SDK版本3.5.3 调用map 再次赋值经纬度地图显示空白

很好复现，请问如何处理

 <map  
          style="width: 100%; height: 300px"  
          :latitude="latitude"  
          :longitude="longitude"  
          :markers="covers"  
          id="map1"  
          ref="map1"  
        >  
        </map>  

data() {  
      latitude: 39.909,  
      longitude: 116.39742,  
      covers: [], //后台返回的经纬度  
    };  
  },  
  onLoad() {  
    let self = this;  
    setTimeout(() => {  
      self.latitude = 31.974413599615424;  
      self.longitude = 118.77566781789994;  
    }, 500);  
  },

2022-08-17 09:21 负责人:无分享

7 个回复

1***@qq.com

这个问题我也碰到了，这是uniapp原生map的bug经度纬度兑换赋值才能行，这bug早就有了，还没修复官方不晓得在干嘛

DCloud_UNI_WZF

google 地图 H5端测试未复现该问题，请参考提交Bug模板提供详细信息及可复现demo

zhangrl (作者)

app 小程序都没有问题，只有app

2022-08-17 09:50
DCloud_UNI_WZF

回复 1***@qq.com: 暂时可通过修改经纬度的同时修改map的key绕过该问题，但是会导致重新渲染

2022-08-17 10:22
zhangrl (作者)

回复 DCloud_UNI_WZF: 同时修改map的key 是什么问题，因为我发现ios 使用nvue 的map 也有此问题，

2022-08-24 15:29

DCloud_UNI_WZF

vue3 app端复现该问题，感谢反馈，已加分

zhangrl (作者)

经测试临时可以通过改变中心点规避

<template>  
  <view>  
    <view class="page-body">  
      <view class="page-section page-section-gap">  
        <map  
          id="map"  
          :controls="controls"  
          style="width: 100%; height: 100vh"  
          :markers="markers"  
          :scale="15"  
          :latitude="latitude"  
          :longitude="longitude"  
        >  
          <cover-view @click="startNav">开始导航</cover-view>  
        </map>  
      </view>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      subNVue: "",  
      subNVueShowDetail: "",  
      msg: "",  

      id: 0, // 使用 marker点击事件 需要填写id  
      title: "map",  
      // longitude: 116.39742,  // 默认的是北京经纬度  
      // latitude: 39.909,  
      longitude: 106.220885,  
      latitude: 29.590185,  
      controls: [],  
      markers: [  
        {  
          id: "gyqy",  
          latitude: "29.595587852178966",  
          longitude: "106.22169495575275",  
          title: "企业",  
          iconPath: "./images/map/currentPos.png",  
        },  
      ],  
    };  
  },  

  onLoad() {  
    // this.getDeviceLocation();  
  },  
  onReady() {  
    this.createMap(); //地图创建在页面中需要在onReady调用  
  },  
  methods: {  
    // 创建地图  
    createMap() {  
      let self = this;  
      // let mapContext = uni.createMapContext("map");  
      setTimeout(() => {  
        let mapContext = uni.createMapContext("map");  
        mapContext  
          .$getAppMap()  
          .setCenter(new plus.maps.Point(118.78025, 31.972952)); //显示用户位置  
        // this.getDeviceLocation();  

        self.markers = [  
          {  
            id: "gyqy2",  
            latitude: "31.972952",  
            longitude: "118.78025",  
            title: "企业1",  
            iconPath: "./images/map/currentPos.png",  
          },  
        ];  
      }, 800);  
    },  

  },  
};  
</script>  

<style></style>