From 4f0c3cb2e324164f09f00acd2fb1f99f98c40a8f Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期二, 25 二月 2025 15:17:18 +0800
Subject: [PATCH] 1
---
H5/pages/location/location.vue | 479 ++++++++++++++++++++++++++++------------------------
H5/pages.json | 4
2 files changed, 261 insertions(+), 222 deletions(-)
diff --git a/H5/pages.json b/H5/pages.json
index 057564b..ef5dcd2 100644
--- a/H5/pages.json
+++ b/H5/pages.json
@@ -4,7 +4,7 @@
{
"path": "pages/index/index",
"style": {
- "navigationBarTitleText": "uni-app",
+ "navigationBarTitleText": "首页",
"navigationStyle": "custom"
}
},
@@ -101,7 +101,7 @@
],
"globalStyle": {
"navigationBarTextStyle": "black",
- "navigationBarTitleText": "uni-app",
+ "navigationBarTitleText": "三个身边",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
diff --git a/H5/pages/location/location.vue b/H5/pages/location/location.vue
index fcc53a0..94f136e 100644
--- a/H5/pages/location/location.vue
+++ b/H5/pages/location/location.vue
@@ -1,221 +1,260 @@
-<template>
- <view class="content">
- <u-navbar title="选择地点" bgColor="transparent" titleStyle="font-size: 35rpx;font-weight:bold;" placeholder>
- <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>
- <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" v-model="keyword" placeholder="搜索小区/写字楼等"
- placeholder-style="font-size:27rpx"></input>
- <view class="sure" @click="searchLocation">
- 确定
- </view>
- </view>
-
- </view>
- <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>
-
- </view>
-</template>
-
-<script>
- export default {
- data() {
- return {
- latitude: 39.909,
- longitude: 116.39742,
- map: null,
- uid: 0,
- keyword: '',
- locationList: [],
- };
- },
- methods: {
-
- back() {
- uni.navigateBack()
- },
-
- changeAdr(value, addr) {
- console.log(value, addr, 'asdasdada');
- this.uid = value
- const pages = getCurrentPages()
- let prevPage = pages[pages.length - 2];
- prevPage.location = addr.address
- prevPage.latitude = addr.point.lat
- prevPage.longitude = addr.point.lng
- setTimeout(() => {
- uni.navigateBack()
- }, 200)
- },
- // 搜索地点
- searchLocation() {
- if (!this.keyword) return;
- uni.request({
- url: `https://api.map.baidu.com/place/v2/search`,
- method: 'GET',
- data: {
- query: this.keyword,
- location: `${this.latitude},${this.longitude }`,
- 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() {
- 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.enableScrollWheelZoom(true);
- this.map.centerAndZoom(point, 12);
- var marker = new BMapGL.Marker(point);
- this.map.addOverlay(marker);
- 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
- })
-
- })
- this.map.addEventListener('click', (e) => {
- var mercator = this.map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
- this.latitude = e.latlng.lat
- this.longitude = e.latlng.lng
- var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
- this.map.centerAndZoom(point, 12);
- var myGeo = new BMapGL.Geocoder();
- // 根据坐标得到地址描述
- myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), (result) => {
- console.log(result, 'result');
- this.locationList = result.surroundingPois.map((item, index) => {
- item.id = index + 1
- return item
- })
-
- })
- var marker = new BMapGL.Marker(point);
- this.map.addOverlay(marker);
- });
- }
- });
-
- }
- }
-</script>
-
-<style lang="scss" scoped>
- #container {
- width: 100vw;
- 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;
- padding-right: 40rpx;
- border-radius: 40rpx;
-
- .search {
- width: 669rpx;
- height: 77rpx;
- background: #FFFFFF;
- border-radius: 38rpx;
- border: 2rpx solid #DADADA;
- display: flex;
-
- align-items: center;
- justify-content: space-between;
- }
- }
-
-
- .sure {
- width: 104rpx;
- height: 69rpx;
- background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
- border-radius: 48rpx;
- font-weight: 500;
- font-size: 23rpx;
- color: #FFFFFF;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .card {
- display: flex;
- flex-direction: column;
- font-weight: 800;
- font-size: 31rpx;
- color: rgba(0, 0, 0, 0.8);
- padding: 34rpx 38rpx 33rpx 38rpx;
- background: #fff;
- border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
- }
+<template>
+ <view class="content">
+ <u-navbar title="选择地点" bgColor="transparent" titleStyle="font-size: 35rpx;font-weight:bold;" placeholder>
+ <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>
+ <view class=" main">
+ <view class="searchMain mb-35 mt-38">
+ <view class="search fs-27 ">
+ <text class="mr-35 ml-50">{{ city }}</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" v-model="keyword" placeholder="搜索小区/写字楼等"
+ placeholder-style="font-size:27rpx"></input>
+ <view class="sure" @click="searchLocation">
+ 确定
+ </view>
+ </view>
+
+ </view>
+ <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>
+
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ latitude: 39.909,
+ longitude: 116.39742,
+ map: null,
+ uid: 0,
+ keyword: '',
+ locationList: [],
+ city: '攀枝花市'
+ };
+ },
+ methods: {
+
+ back() {
+ uni.navigateBack()
+ },
+
+ changeAdr(value, addr) {
+ console.log(value, addr, 'asdasdada');
+ this.uid = value
+ const pages = getCurrentPages()
+ let prevPage = pages[pages.length - 2];
+ prevPage.location = addr.address
+ prevPage.latitude = addr.point.lat
+ prevPage.longitude = addr.point.lng
+ setTimeout(() => {
+ uni.navigateBack()
+ }, 200)
+ },
+ // 搜索地点
+ searchLocation() {
+ if (!this.keyword) return;
+ uni.request({
+ url: `https://api.map.baidu.com/place/v2/search`,
+ method: 'GET',
+ data: {
+ query: this.keyword,
+ location: `${this.latitude},${this.longitude }`,
+ 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() {
+ this.map = new BMapGL.Map("container"); // 创建地图实例
+ console.log(this.map);
+ // uni.getLocation({
+ // type: 'wgs84',
+ // success: (res) => {
+ navigator.geolocation.getCurrentPosition(success, error, options);
+
+ function success(position) {
+ const latitude = position.coords.latitude;
+ const longitude = position.coords.longitude;
+ const accuracy = position.coords.accuracy; // 精度，单位米
+
+ console.log(`纬度: ${latitude}, 经度: ${longitude}, 精度: ${accuracy}`);
+ // 在这里可以使用获取到的经纬度信息，例如在地图上显示位置等。
+ }
+
+ function error(err) {
+ console.log(err);
+ switch (err.code) {
+ case err.PERMISSION_DENIED:
+ console.error("用户拒绝了位置请求。");
+ break;
+ case err.POSITION_UNAVAILABLE:
+ console.error("无法获取位置信息。");
+ break;
+ case err.TIMEOUT:
+ console.error("位置请求超时。");
+ break;
+ default:
+ console.error("未知错误。");
+ }
+ }
+
+ const options = {
+ enableHighAccuracy: true, // 启用高精度定位
+ timeout: 5000, // 5 秒超时
+ maximumAge: 0 // 不使用缓存
+ };
+ let res = {
+ longitude: 101.725544,
+ latitude: 26.587259
+ }
+ this.longitude = res.longitude;
+ this.latitude = res.latitude;
+ var point = new BMapGL.Point(res.longitude, res.latitude); // 创建点坐标
+ this.map.enableScrollWheelZoom(true);
+ this.map.centerAndZoom(point, 12);
+ var marker = new BMapGL.Marker(point);
+ this.map.addOverlay(marker);
+ var myGeo = new BMapGL.Geocoder();
+ // 根据坐标得到地址描述
+ myGeo.getLocation(new BMapGL.Point(res.longitude, res.latitude), (result) => {
+ this.locationList = result.surroundingPois.map((item, index) => {
+ item.id = index + 1
+ return item
+ })
+
+ })
+ this.map.addEventListener('click', (e) => {
+ var mercator = this.map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
+ this.latitude = e.latlng.lat
+ this.longitude = e.latlng.lng
+ var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
+ this.map.centerAndZoom(point, 12);
+ var myGeo = new BMapGL.Geocoder();
+ // 根据坐标得到地址描述
+ myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), (result) => {
+ console.log(result, 'result');
+ this.locationList = result.surroundingPois.map((item, index) => {
+ item.id = index + 1
+ return item
+ })
+
+ })
+ var marker = new BMapGL.Marker(point);
+ this.map.addOverlay(marker);
+ });
+ // },
+ // error:err=>{
+ // console.log(err,'err');
+ // }
+ // });
+
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ #container {
+ width: 100vw;
+ 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;
+ padding-right: 40rpx;
+ border-radius: 40rpx;
+
+ .search {
+ width: 669rpx;
+ height: 77rpx;
+ background: #FFFFFF;
+ border-radius: 38rpx;
+ border: 2rpx solid #DADADA;
+ display: flex;
+
+ align-items: center;
+ justify-content: space-between;
+ }
+ }
+
+
+ .sure {
+ width: 104rpx;
+ height: 69rpx;
+ background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
+ border-radius: 48rpx;
+ font-weight: 500;
+ font-size: 23rpx;
+ color: #FFFFFF;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .card {
+ display: flex;
+ flex-direction: column;
+ font-weight: 800;
+ font-size: 31rpx;
+ color: rgba(0, 0, 0, 0.8);
+ padding: 34rpx 38rpx 33rpx 38rpx;
+ background: #fff;
+ border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
+ }
</style>
\ No newline at end of file
--
Gitblit v1.7.1