<template>
<view class="body">
<map v-if="showMap" id="covering-map" ref="covering-map" :scale="16" style="height: 100%;width: 100%;"
:show-location="true" :latitude="latitude" :longitude="longitude" show-compass="true"
@updated="onMapUpdated">
</map>
<view class="confirm-btn-view">
<uv-button type="primary" text="确定" customStyle="width:90%" @click="confirmPosition"></uv-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
mapContext : null,
baseMap : null,
showMap: false,
latitude: 39.909,
longitude: 116.39742,
}
},
async onLoad() {
let res = await uni.getLocation({
type: "wgs84 "
});
this.latitude = res.latitude
this.longitude = res.longitude;
this.showMap = true;
console.log("onLoad")
},
onReady() {
this.mapContext = uni.createMapContext('covering-map', this)
},
methods: {
confirmPosition() {
console.log("confirmPosition")
console.log(this.mapContext.$getAppMap())
},
// 地图加载完成触发
onMapUpdated() {
console.log("onMapUpdated")
console.log(this.mapContext.$getAppMap())
this.mapContext.moveToLocation();
}
}
}
</script>
<style scoped>
page {
height: 100%;
}
.body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.confirm-btn-view {
width: 100%;
position: absolute;
bottom: 100rpx;
opacity: 0.8;
}
</style>
- 发布:2023-09-08 13:52
- 更新:2023-09-08 13:52
- 阅读:126
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
HBuilderX类型: 正式
HBuilderX版本号: 3.8.12
浏览器平台: Edge
浏览器版本: 114.0.1823.43 (正式版本) (64 位)
项目创建方式: HBuilderX
示例代码:
操作步骤:
略
略
预期结果:
与IOS一样,获取到 原生地图对象
与IOS一样,获取到 原生地图对象
实际结果:
IOS有值,H5无值
IOS有值,H5无值
bug描述:
H5中通过mapContext对象,无法获取到原生地图对象,IOS是可以的
打印$getAppMap,打印为空方法