<template>
|
<view class="content">
|
<u-navbar height="44" :is-back="false" title="获取地址" title-color="#fff" :background="{background: '#103289'}">
|
<u-button class="slot-wrap" type="primary" size="mini" @click="returnPage">确定</u-button>
|
</u-navbar>
|
<map id="SignLocationMap"
|
style="position: absolute; left: 0; width: 100%; z-index: 99;"
|
:style="{height: screenHeight + 'px'}"
|
@regionchange="regionChange" :latitude="latitude" :longitude="longitude" :scale="scale">
|
|
<cover-view class="dingwBut">
|
<cover-image class="location-log" src="../../static/img/location.png">
|
</cover-image>
|
</cover-view>
|
</map>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
screenHeight: 0,
|
mapLocationName: '',
|
mapLocationLatitude: '',
|
mapLocationLongitude: '',
|
|
regionID: '',
|
|
latitude: 28.678983439095823,
|
longitude: 115.84414205551147,
|
scale: 15 //缩放级别
|
}
|
},
|
onReady() {
|
var that = this
|
|
uni.getSystemInfo({
|
success: function(res) {
|
console.log(res, 465)
|
that.screenHeight = res.windowHeight - 44
|
}
|
})
|
},
|
methods: {
|
regionChange() { // 移动地图后重新获取门店
|
var that = this
|
uni.createMapContext('SignLocationMap', this).getCenterLocation({
|
success: res => {
|
that.getLocationInfor(res.longitude, res.latitude)
|
},
|
fail: res => {
|
uni.showModal({
|
content: '获取位置失败',
|
showCancel: false
|
})
|
}
|
})
|
},
|
|
getLocationInfor(longitude, latitude) {
|
var that = this
|
var point = new plus.maps.Point(longitude, latitude);
|
plus.maps.Map.reverseGeocode(
|
point, {},
|
function(event) {
|
var address = event.address; // 转换后的地理位置
|
var point = event.coord; // 转换后的坐标信息
|
var coordType = event.coordType; // 转换后的坐标系类型
|
|
|
that.mapLocationName = address
|
that.mapLocationLongitude = point.longitude
|
that.mapLocationLatitude = point.latitude
|
|
},
|
function(e) {}
|
);
|
},
|
|
returnPage() {
|
console.log(1)
|
var that = this
|
uni.$emit('getLocation', {
|
mapLocationName: that.mapLocationName,
|
regionID: that.regionID
|
});
|
//关闭当前窗口
|
uni.navigateBack({});
|
}
|
|
},
|
watch: {
|
|
|
}
|
};
|
</script>
|
</script>
|
|
<style lang="scss" scoped>
|
.slot-wrap {
|
position: absolute;
|
top: 0;
|
left: auto;
|
right: 10px;
|
bottom: 0;
|
margin: auto;
|
color: #fff;
|
/* 如果您想让slot内容占满整个导航栏的宽度 */
|
/* flex: 1; */
|
/* 如果您想让slot内容与导航栏左右有空隙 */
|
/* padding: 0 30rpx; */
|
}
|
|
.dingwBut {
|
width: 48px;
|
height: 48px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
z-index: 9999;
|
transform: translateY(-22px);
|
}
|
|
</style>
|
