
- 发布:2021-11-25 09:19
- 更新:2021-11-25 09:19
- 阅读:739
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 19043.1348
HBuilderX类型: 正式
HBuilderX版本号: 3.2.16
手机系统: 全部
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<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>
<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);
}
});
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上微信小程序又是正常的
0 个回复