<template>
|
<view class="content">
|
<view slot="left" @click="back">
|
<image src="/static/location/back.png" class="w-19 h-35" mode=""></image>
|
</view>
|
<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.title || item.name}}</text>
|
<text class="font-w500 fs-23 mt-25"
|
style="color: rgba(0, 0, 0, 0.6);">{{item.address || item.name}}</text>
|
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
searchLocation
|
} from './service'
|
export default {
|
data() {
|
return {
|
latitude: 39.909,
|
longitude: 116.39742,
|
map: null,
|
uid: 0,
|
keyword: '',
|
locationList: [],
|
city: '攀枝花市',
|
markers: [],
|
};
|
},
|
methods: {
|
outOfChina(lng, lat) {
|
return (lng < 72.004 || lng > 137.8347) || (lat < 0.8293 || lat > 55.8271);
|
},
|
|
// 纬度转换函数
|
transformLat(x, y) {
|
let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
|
ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;
|
ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;
|
return ret;
|
},
|
|
// 经度转换函数
|
transformLon(x, y) {
|
let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
|
ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;
|
ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;
|
return ret;
|
},
|
|
// WGS - 84 转 GCJ - 02
|
wgs84ToGcj02(lng, lat) {
|
if (this.outOfChina(lng, lat)) {
|
return [lng, lat];
|
}
|
let dLat = this.transformLat(lng - 105.0, lat - 35.0);
|
let dLng = this.transformLon(lng - 105.0, lat - 35.0);
|
let radLat = lat / 180.0 * Math.PI;
|
let magic = Math.sin(radLat);
|
magic = 1 - 0.00669342162296594323 * magic * magic;
|
let sqrtMagic = Math.sqrt(magic);
|
dLat = (dLat * 180.0) / ((6378245.0 / (1 - magic)) * Math.cos(radLat) * Math.PI);
|
dLng = (dLng * 180.0) / (6378245.0 / sqrtMagic * Math.cos(radLat) * Math.PI);
|
let mgLat = lat + dLat;
|
let mgLng = lng + dLng;
|
return [mgLng, mgLat];
|
},
|
|
// GCJ - 02 转 BD - 09
|
gcj02ToBd09(lng, lat) {
|
let x = lng;
|
let y = lat;
|
let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * 3000.0 * Math.PI / 180.0);
|
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * 3000.0 * Math.PI / 180.0);
|
let bdLng = z * Math.cos(theta) + 0.0065;
|
let bdLat = z * Math.sin(theta) + 0.006;
|
return [bdLng, bdLat];
|
},
|
clearMarkers() {
|
// 清除所有标点
|
this.markers.forEach((marker) => {
|
this.map.removeOverlay(marker);
|
});
|
this.markers = []; // 清空存储标点的数组
|
},
|
back() {
|
uni.navigateBack()
|
},
|
|
changeAdr(value, addr) {
|
this.uid = value
|
const pages = getCurrentPages()
|
let prevPage = pages[pages.length - 2];
|
|
if (addr.point) {
|
prevPage.latitude = addr.point.lat
|
prevPage.longitude = addr.point.lng
|
}
|
if (addr.location) {
|
prevPage.latitude = addr.location.lat
|
prevPage.longitude = addr.location.lng
|
}
|
prevPage.location = addr.address || addr.name || addr.title
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 200)
|
},
|
// 搜索地点
|
searchLocation() {
|
if (!this.keyword) return;
|
searchLocation({
|
query: this.keyword,
|
location: `${this.latitude},${this.longitude }`,
|
}).then(res => {
|
if (res.code == 200) {
|
this.searchResults = res.data;
|
if (res.data.length > 0) {
|
this.latitude = res.data[0].location.lat
|
this.longitude = res.data[0].location.lng
|
}
|
this.locationList = res.data.map((result, index) => {
|
result.id = index + 1
|
return result
|
});
|
|
}
|
})
|
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) => {
|
|
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"); // 创建地图实例
|
const that = this
|
// 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;
|
let arr = that.wgs84ToGcj02(longitude, latitude);
|
|
// 转换为 BD - 09
|
let arrs = that.gcj02ToBd09(arr[0], arr[1]);
|
|
const accuracy = position.coords.accuracy; // 精度，单位米
|
// 在这里可以使用获取到的经纬度信息，例如在地图上显示位置等。
|
var point = new BMapGL.Point(arrs[0], arrs[1]); // 创建点坐标
|
that.map.enableScrollWheelZoom(true);
|
that.map.centerAndZoom(point, 12);
|
var marker = new BMapGL.Marker(point);
|
that.map.addOverlay(marker);
|
that.markers.push(marker);
|
var myGeo = new BMapGL.Geocoder();
|
// 根据坐标得到地址描述
|
myGeo.getLocation(new BMapGL.Point(arrs[0], arrs[1]), (result) => {
|
that.locationList = result.surroundingPois.map((item, index) => {
|
item.id = index + 1
|
return item
|
})
|
})
|
}
|
|
function error(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 // 不使用缓存
|
};
|
this.map.addEventListener('click', (e) => {
|
this.clearMarkers()
|
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) => {
|
this.city = result.addressComponents.city
|
if( result.surroundingPois.length>0){
|
this.locationList = result.surroundingPois.map((item, index) => {
|
item.id = index + 1
|
return item
|
})
|
} else {
|
this.locationList = [{
|
id: 1,
|
title: result.address,
|
point: {
|
lat: e.latlng.lat,
|
lng: e.latlng.lng
|
}
|
}]
|
}
|
|
})
|
var marker = new BMapGL.Marker(point);
|
this.map.addOverlay(marker);
|
this.markers.push(marker);
|
});
|
// },
|
// error: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>
|
