| | |
| | | <template> |
| | | <view class="content"> |
| | | <u-navbar title="选择地点" bgColor="transparent" titleStyle="font-size: 35rpx;font-weight:bold;" placeholder> |
| | | <view slot="left"> |
| | | <view slot="left" @click="back"> |
| | | <image src="/static/location/back.png" class="w-19 h-35" mode=""></image> |
| | | </view> |
| | | </u-navbar> |
| | | <view class="" id="container"> |
| | | <view class="" id="container" @regionchange="onRegionChange"> |
| | | |
| | | </view> |
| | | <view class=""> |
| | | <view class="searchMain mb-35"> |
| | | <view class=" main"> |
| | | <view class="searchMain mb-35 mt-38"> |
| | | <view class="search fs-27 "> |
| | | <text class="mr-35 ml-50">成都市</text> |
| | | <image class="w-17 h-8 mr-35" src="/static/location/toleft.png" mode=""></image> |
| | | <image class="w-31 h-31 mr-13" src="/static/location/search.png" mode=""></image> |
| | | <input class="flex1" placeholder="搜索小区/写字楼等" placeholder-style="font-size:27rpx"></input> |
| | | <view class="sure"> |
| | | <input class="flex1" v-model="keyword" placeholder="搜索小区/写字楼等" |
| | | placeholder-style="font-size:27rpx"></input> |
| | | <view class="sure" @click="searchLocation"> |
| | | 确定 |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | <view class="card" :class="" v-for="item in 5"> |
| | | <text>天府新谷九号楼二单元</text> |
| | | <text class="font-w500 fs-23 mt-25" style="color: rgba(0, 0, 0, 0.6);">四川省成都市高新区府城大道西段399号天</text> |
| | | <view class="card" @click="changeAdr(item.id,item)" :class="item.id ==uid ?'activecard':''" |
| | | v-for="item in locationList" :key="item.id"> |
| | | <text>{{item.address}}</text> |
| | | <text class="font-w500 fs-23 mt-25" style="color: rgba(0, 0, 0, 0.6);">{{item.address}}</text> |
| | | |
| | | </view> |
| | | </view> |
| | |
| | | return { |
| | | latitude: 39.909, |
| | | longitude: 116.39742, |
| | | map: null, |
| | | uid: 0, |
| | | keyword: '', |
| | | locationList: [], |
| | | }; |
| | | }, |
| | | mounted() { |
| | | methods: { |
| | | back() { |
| | | uni.navigateBack() |
| | | }, |
| | | onRegionChange(e) { |
| | | if (e.type === 'end') { |
| | | // 地图移动结束时执行操作 |
| | | console.log('地图移动结束,新的中心点经度:', e.longitude, '新的中心点纬度:', e.latitude); |
| | | } |
| | | }, |
| | | changeAdr(value, addr) { |
| | | console.log(value, addr, 'asdasdada'); |
| | | this.uid = value |
| | | const pages = getCurrentPages() |
| | | let prevPage = pages[pages.length - 2]; |
| | | prevPage.location = addr.address |
| | | setTimeout(() => { |
| | | uni.navigateBack() |
| | | }, 500) |
| | | }, |
| | | // 搜索地点 |
| | | searchLocation() { |
| | | if (!this.keyword) return; |
| | | uni.request({ |
| | | url: `https://api.map.baidu.com/place/v2/search`, |
| | | method: 'GET', |
| | | data: { |
| | | query: this.keyword, |
| | | location: `${30.39},${104.04}`, |
| | | radius: 10000, // 搜索半径,单位:米 |
| | | output: 'json', |
| | | ak: '3mHKIXMArjgIkgADzOlTYp4XssNSNkwr' // 替换为你自己的 AK |
| | | }, |
| | | success: (res) => { |
| | | console.log(res, '-------'); |
| | | if (res.data.status === 0) { |
| | | this.searchResults = res.data.results; |
| | | this.latitude = res.data.results[0].location.lat |
| | | this.longitude = res.data.results[0].location.lng |
| | | this.locationList = res.data.results.map((result, index) => { |
| | | |
| | | result.id = index + 1 |
| | | |
| | | return result |
| | | }); |
| | | } |
| | | }, |
| | | fail: (err) => { |
| | | console.error('搜索失败:', err); |
| | | } |
| | | }); |
| | | }, |
| | | }, |
| | | onLoad() { |
| | | |
| | | }, |
| | | onReady() { |
| | | var map = new BMapGL.Map("container"); // 创建地图实例 |
| | | var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 |
| | | map.centerAndZoom(point, 15); |
| | | this.map = new BMapGL.Map("container"); // 创建地图实例 |
| | | |
| | | uni.getLocation({ |
| | | type: 'wgs84', |
| | | success: (res) => { |
| | | console.log(res, 'res'); |
| | | this.longitude = res.longitude; |
| | | this.latitude = res.latitude; |
| | | var point = new BMapGL.Point(res.longitude, res.latitude); // 创建点坐标 |
| | | this.map.centerAndZoom(point, 12); |
| | | var myGeo = new BMapGL.Geocoder(); |
| | | // 根据坐标得到地址描述 |
| | | myGeo.getLocation(new BMapGL.Point(res.longitude, res.latitude), (result) => { |
| | | console.log(result, 'result'); |
| | | this.locationList = result.surroundingPois.map((item, index) => { |
| | | item.id = index + 1 |
| | | return item |
| | | }) |
| | | |
| | | }) |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <style lang="scss" scoped> |
| | | #container { |
| | | width: 100vw; |
| | | height: 517rpx; |
| | | height: 534rpx; |
| | | } |
| | | |
| | | .content { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | |
| | | .main { |
| | | background-color: #fff; |
| | | border-radius: 34rpx; |
| | | position: absolute; |
| | | top: 517rpx; |
| | | z-index: 100; |
| | | |
| | | .activecard { |
| | | background: #F2F2F2; |
| | | } |
| | | |
| | | } |
| | | |
| | | } |
| | | |
| | | |
| | | .searchMain { |
| | | padding-left: 40rpx; |
| | |
| | | font-size: 31rpx; |
| | | color: rgba(0, 0, 0, 0.8); |
| | | padding: 34rpx 38rpx 33rpx 38rpx; |
| | | background: #F2F2F2; |
| | | background: #fff; |
| | | border-bottom: 2rpx solid rgba(0, 10, 26, 0.07); |
| | | } |
| | | </style> |