<view class="map">
<view class="page-body">
<view class="page-section page-section-gap">
<map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers">
<cover-view class="cover-view">
<cover-image @tap="getLocationHandle" class="cover-image" src="@/static/refresh.png"></cover-image>
</cover-view>
</map>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
id: 0, // 使用 marker点击事件 需要填写id
title: 'map',
latitude: 39.909,
longitude: 116.39742,
covers: [],
address:''
}
},
onShow(){
this.getLocation()
},
onNavigationBarButtonTap(){
console.log('经度:' + this.longitude + ',纬度:' + this.latitude,this.address);
},
methods: {
// 定位授权
getLocation() {
let that = this;
// 1、判断手机定位服务【GPS】 是否授权
uni.getSystemInfo({
success:(res=> {
console.log("判断手机定位服务是否授权:", res);
let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
if (locationEnabled == false) {
//手机定位服务(GPS)未授权
uni.showToast({
title: "请打开手机GPS",
icon: "none",
});
} else {
this.getLocationHandle(1)
}
}),
});
},
getLocationHandle(type){
this.latitude = type===1?39.909:''
this.longitude = type===1?116.39742:''
uni.getLocation({
geocode:true,
type: 'gcj02', // 坐标系类型
success: (res)=> {
console.log(res);
this.address = res.address
this.latitude = res.latitude; // 维度
this.longitude = res.longitude; // 经度
this.covers = [{
id:1,
latitude: this.latitude,
longitude: this.longitude,
width:40,
height:40,
iconPath: '/static/componentA/city1.png'
}]
},
fail: (res) =>{
console.log('获取定位失败:' + res.errMsg);
}
})
}
}
}
</script>

- 发布:2023-11-20 14:10
- 更新:2023-11-20 17:27
- 阅读:190
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
HBuilderX类型: 正式
HBuilderX版本号: 3.96
手机系统: Android
手机系统版本号: Android 13
手机厂商: 华为
手机机型: nova7pro
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
直接运行
直接运行
预期结果:
大小和设置的一致
大小和设置的一致
实际结果:
图标大小很小
图标大小很小
1 个回复
z***@163.com (作者) - 无
nvue支持,vue不支持