<template>
<view class="map-content flex-wrap">
<u-navbar :is-back="true" title="位置采集" back-icon-color="#ffffff" :background="{backgroundColor: '#2979ff'}"
title-color="#ffffff">
<view class="slot-wrap">
<u-icon name="checkbox-mark" @click="confirmClickHandle" size="30"></u-icon>
</view>
</u-navbar>
<view class="content flex-con">
<!-- 正文内容 -->
<map id="maps" class="map" style="width: 100vw;height: 100%;" :longitude="longitude" :latitude="latitude"
:markers="markers" enable-zoom=true @regionchange="regionchange"></map>
</view>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 35.948,
longitude: 120.151,
markers: []
}
},
onLoad(option) {
if (option.addressInfo != "") {
this.latitude = option.addressInfo.split(",")[1]
this.longitude = option.addressInfo.split(",")[0]
}
},
methods: {
// 点击确定按钮
confirmClickHandle() {
var pages = getCurrentPages(); //当前页
var beforePage = pages[pages.length - 2]; //上个页面
let address=(this.markers[0].longitude).toFixed(6)+","+(this.markers[0].latitude).toFixed(6)
beforePage.$vm.addressInfo=address
uni.navigateBack()
},
// 拖拽地图
regionchange(event) {
if (event.type == 'regionchange') {
this.getCenterLanLat()
}
},
// 获取当前地图中心的经纬度
getCenterLanLat() {
let self = this
this.mapContext = uni.createMapContext("maps", this);
this.mapContext.getCenterLocation({
type: 'gcj02',
success: (res) => {
let address = {
latitude: res.latitude,
longitude: res.longitude
}
this.$set(this.markers, 0, {
id: 1,
latitude: address.latitude,
longitude: address.longitude,
iconPath: '../../static/images/index/address1.png'
})
},
fail: (err) => {
// console.log('获取当前地图中心的经纬度2', err);
}
})
},
}
}
</script>
<style lang="scss">
.map-content {
height: 100vh !important;
.slot-wrap {
display: flex;
align-items: center;
text-align: right;
justify-content: flex-end;
padding-right: 1rem;
flex: 1;
color: #FFFFFF;
}
}
.u-navbar-inner {
background-color: "#2979ff" !important;
}
</style>
uniapp地图自定义组件拖拽获取中心经纬度
最新推荐文章于 2023-09-18 17:29:37 发布