zhangrl
zhangrl
  • 发布:2022-08-17 09:21
  • 更新:2022-08-25 14:37
  • 阅读:993

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

分类:uni-app

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 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

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

DCloud_UNI_WZF

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

DCloud_UNI_WZF

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

zhangrl

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>  

DCloud_uniAD_HDX

DCloud_uniAD_HDX

截图看看显示效果

DCloud_uniAD_HDX

DCloud_uniAD_HDX

vue3 vue页面 map 组件,当前版本解决方案,更新属性 latitude longitude 时将值颠倒下,下个版本修复此问题

  • zhangrl (作者)

    nvue 呢


    2022-08-24 15:31

  • DCloud_uniAD_HDX

    回复 1***@qq.com: nvue 不存在此问题


    2022-08-25 14:38

  • s***@163.com

    考古一下,该时间点依然存在此bug


    2023-11-02 13:54

DCloud_uniAD_HDX

DCloud_uniAD_HDX

3.5.5+ 已修复

要回复问题请先登录注册