125 lines
2.9 KiB
Vue
125 lines
2.9 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar
|
||
title="灾害发生地点"
|
||
@leftClick="navigateBack"
|
||
safeAreaInsetTop
|
||
fixed
|
||
placeholder
|
||
></u-navbar>
|
||
<view class="page-section page-section-gap">
|
||
<map
|
||
style="width: 100%; height: 300px; flex: 1"
|
||
id="container"
|
||
:latitude="lnglat[1]"
|
||
:longitude="lnglat[0]"
|
||
enable-scroll
|
||
enable-rotate
|
||
></map>
|
||
</view>
|
||
|
||
<view class="text">
|
||
<text class="tit">当前位置</text>
|
||
<view id="adds">{{ address }}</view>
|
||
</view>
|
||
<view class="text">
|
||
<p class="tit">经/纬度</p>
|
||
|
||
<view
|
||
><span id="lng">{{ lnglat[0] }}， {{ lnglat[1] }}</span></view
|
||
>
|
||
</view>
|
||
<u-button
|
||
:disabled="!address"
|
||
type="primary"
|
||
text="确定"
|
||
customStyle="margin-top: 50px"
|
||
@click="backclick"
|
||
></u-button>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
// import AMapLoader from '@amap/amap-jsapi-loader'
|
||
|
||
export default {
|
||
name: 'map-view',
|
||
data () {
|
||
return {
|
||
lnglat: [109.139726, 29.665203],
|
||
geocoder: null,
|
||
marker: null,
|
||
geocoder: null,
|
||
address: null,
|
||
markers: [
|
||
{
|
||
latitude: 29.665203,
|
||
longitude: 109.139726,
|
||
iconPath: '../../static/tabs/add.png'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
mounted () {
|
||
uni.showLoading({ title: '加载中...', mask: true })
|
||
this.initAMap()
|
||
},
|
||
onShow () {},
|
||
onLoad () {},
|
||
methods: {
|
||
navigateBack () {
|
||
this.$emit('navBack', false)
|
||
},
|
||
backclick () {
|
||
this.$emit('back', this.lnglat, this.address)
|
||
},
|
||
mapClick (val) {
|
||
console.log('val', val)
|
||
},
|
||
initAMap () {
|
||
const self = this
|
||
console.log('erreee', 'wgs84', 'gcj02')
|
||
|
||
uni.getLocation({
|
||
type: 'gcj02',
|
||
isHighAccuracy: 'true',
|
||
geocode: 'true',
|
||
success: function (res) {
|
||
console.log('res----------', res)
|
||
const latitude = res.latitude
|
||
const longitude = res.longitude
|
||
|
||
self.lnglat = [longitude, latitude]
|
||
|
||
uni.hideLoading()
|
||
console.log('lnglatlnglat', self.lnglat, res)
|
||
console.log('地址', res.address)
|
||
|
||
if (res.address) {
|
||
let city = res.address.city ? res.address.city : ''
|
||
let district = res.address.district ? res.address.district : ''
|
||
let street = res.address.street ? res.address.street : ''
|
||
self.address = `${city}${district}${street}`
|
||
console.log('地址', self.address)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.cont {
|
||
width: 100%;
|
||
height: 450px;
|
||
}
|
||
.text {
|
||
margin: 10px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.text .tit {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|