2***@qq.com
2***@qq.com
  • 发布:2021-11-25 09:19
  • 更新:2021-11-25 09:19
  • 阅读:599

【报Bug】map组件 在vue3下无法定位到当前位置(仅APP端)

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 19043.1348

HBuilderX类型: 正式

HBuilderX版本号: 3.2.16

手机系统: 全部

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

鸿蒙2.0 荣耀

示例代码:
  <view class="content">  
    <view class="test-button">  
      <!-- <van-button @click="onEnlarge">+</van-button> -->  
      <!-- <van-button @click="onZoom">-</van-button> -->  
      <button @click="onZoom">-</button>  
      <!-- <van-button @click="onLocation">定 位</van-button> -->  
    </view>  
    <map id="test-map" class="map-test" :show-location="true" :scale="mapScale" :longitude="longitude" :latitude="latitude" :markers="markers"></map>  
  </view>  
</template>  

<script lang="ts">  
import vue, { ref, onMounted, defineComponent } from "vue";  

export default defineComponent({  
  onLoad() {},  
  setup() {  
    const MapContext = uni.createMapContext("test-map");  
    const longitude = ref(116.39747);  
    const latitude = ref(39.908823);  
    const mapScale = ref(16);  
    const markers = ref([]);  
    const polyline = ref([]);  

    uni.getLocation({  
      type: "gcj02",  
      success: (res) => {  
         /*app端不正常的*/  
        // longitude.value = res.longitude;  
        // latitude.value = res.latitude;  
        /*app端正常的*/  
        longitude.value = res.latitude;  
        latitude.value = res.longitude;  
        // longitude.value = "113.75179";  
        // latitude.value= "23.02067";  
        console.log("当前位置的经度:" + res.longitude);  
        console.log("当前位置的纬度:" + res.latitude);  
      },  
      fail(e) {  
        console.log(e);  
      }  
    });  

    // #ifdef MP-WEIXIN  
    MapContext.setCenterOffset({  
      offset: [0.5, 0.26]  
    });  
    // #endif  

    const scale = ref(13);  
    return { longitude, latitude, markers, polyline, mapScale, MapContext, scale };  
  },  
  methods: {  
    onZoom() {  
      this.mapScale = this.mapScale - 1;  
    }  
  }  
});  
</script>  

<style>  
.map-test {  
  width: 100vw;  
  height: calc(100vh - 100px);  
}  
.test-button {  
  /* position: absolute;  
  top: 0;  
  z-index: 1; */  
}  
</style>

操作步骤:
uni.getLocation({  
      type: "gcj02",  
      success: (res) => {  
         /*app端不正常的*/  
        // longitude.value = res.longitude;  
        // latitude.value = res.latitude;  
        /*app端正常的*/  
        longitude.value = res.latitude;  
        latitude.value = res.longitude;  
        // longitude.value = "113.75179";  
        // latitude.value= "23.02067";  
        console.log("当前位置的经度:" + res.longitude);  
        console.log("当前位置的纬度:" + res.latitude);  
      },  
      fail(e) {  
        console.log(e);  
      }  
 });

预期结果:

定位到当前结果

实际结果:

定位不知道那到哪里了

bug描述:

在 APP 端获取到了当前位置,赋值给map时,如果是经度赋给赋给经度,纬度赋给纬度则会不知道定位道哪里,但是如果把纬度赋给经度,经度赋给纬度就可以定位到当前位置。这个问题只有在VUE3 上发现了,在VUE2确是没有,但VUE3上微信小程序又是正常的

2021-11-25 09:19 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复