浅念
259 lines
7.2 KiB
Vue
259 lines
7.2 KiB
Vue
<template>
|
|
<view>
|
|
<view id="map" style="height: 100vh;"></view>
|
|
<!-- 输入框事件 -->
|
|
<view style="display: flex; padding: 30rpx; position: fixed;width: 93%; background: white; top: 0px;">
|
|
<input v-model="value" type="text" id="search-box" placeholder="请输入" class="search" @input="getPlacesList" />
|
|
<view class="btn" @click="nextfn">确定</view>
|
|
</view>
|
|
<view class="card" v-if="list.length > 0">
|
|
<view class="item" v-for="(item, index) in list" :key="index">
|
|
<view @click="confirm(item)">
|
|
<span class="title">{{item.structured_formatting.main_text}}</span>
|
|
<span>{{item.structured_formatting.secondary_text}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { Loader } from "@googlemaps/js-api-loader";
|
|
const loader = new Loader({
|
|
// google服务的KEY
|
|
apiKey: "AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I",
|
|
version: "weekly",
|
|
libraries: ["places"]
|
|
});
|
|
export default {
|
|
data() {
|
|
return {
|
|
map:'',
|
|
value: '',
|
|
// 模糊匹配数据
|
|
list: [],
|
|
center: { lat:'', lng:''},
|
|
cityInfo:{
|
|
lat: '',
|
|
lng: '',
|
|
country: "", //国家
|
|
province: "", //省
|
|
city: "", //市
|
|
district: "", //区
|
|
street: "", //街道
|
|
door: "", //门牌号
|
|
address: "", //详细地址
|
|
}
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
if(e.lat&&e.lat!=''&&e.lat!=0){
|
|
this.center.lat = e.lat
|
|
this.center.lng = e.lng
|
|
}
|
|
console.log(e)
|
|
this.initMap()
|
|
},
|
|
methods:{
|
|
nextfn(){
|
|
uni.setStorageSync('location',JSON.stringify(this.cityInfo));
|
|
uni.navigateBack({})
|
|
},
|
|
// 模糊查询地址
|
|
getPlacesList() {
|
|
var that = this
|
|
var text = this.value
|
|
return new Promise(async(resolve, reject) => {
|
|
if (!text){
|
|
that.list = []
|
|
resolve([])
|
|
}
|
|
const autocomplete = new google.maps.places.AutocompleteService();
|
|
autocomplete.getPlacePredictions({ input: text }, function(predictions, status) {
|
|
that.list = predictions
|
|
});
|
|
});
|
|
},
|
|
confirm(item){
|
|
var that = this
|
|
// var latlng = JSON.parse(JSON.stringify(place.geometry.location))
|
|
console.log("place===", item.description)
|
|
that.value = item.description
|
|
that.cityInfo.address=item.description
|
|
var geocoder = new google.maps.Geocoder();
|
|
// var address = document.getElementById("address").value;
|
|
geocoder.geocode( { 'address': item.description}, function(results, status) {
|
|
console.log(results)
|
|
var latlng = JSON.parse(JSON.stringify(results[0].geometry.location))
|
|
console.log(latlng)
|
|
// // 将地图中心点指向用户所选位置，并设置标记
|
|
that.map.setCenter(latlng);
|
|
that.cityInfo.lat=latlng.lat
|
|
that.cityInfo.lng=latlng.lng
|
|
var searchmarker = new google.maps.Marker({
|
|
map: that.map,
|
|
position: results[0].geometry.location,
|
|
title: results[0].formatted_address
|
|
});
|
|
|
|
});
|
|
that.list =[]
|
|
},
|
|
getErrorMessage(error) {
|
|
switch (error.code) {
|
|
case error.PERMISSION_DENIED:
|
|
return "用户拒绝了地理位置权限";
|
|
case error.POSITION_UNAVAILABLE:
|
|
return "无法获取当前位置";
|
|
case error.TIMEOUT:
|
|
return "获取位置超时";
|
|
default:
|
|
return "未知错误";
|
|
}
|
|
},
|
|
addmapmarkfn(lat,lng){
|
|
var that = this
|
|
that.map = new google.maps.Map(document.getElementById("map"),
|
|
{
|
|
center: { lat:lat, lng: lng},
|
|
zoom: 12,// 地图缩放参数
|
|
maxZoom: 18,// 最大缩放参数
|
|
minZoom: 4,// 最小缩放参数
|
|
disableDefaultUI: true// 禁用默认UI
|
|
}
|
|
)
|
|
var marker = new google.maps.Marker({
|
|
position: { lat:lat, lng: lng},
|
|
map: that.map,
|
|
draggable: true, // 允许拖动标记
|
|
icon: {
|
|
url: 'https://now.guua.com/attachs/default/location_shop.png',
|
|
scaledSize: new google.maps.Size(30, 30),
|
|
origin: new google.maps.Point(0, 0),
|
|
anchor: new google.maps.Point(0, 0)
|
|
}
|
|
});
|
|
// 监听标记拖动事件
|
|
marker.addListener('dragend', () => {
|
|
const position = marker.getPosition();
|
|
that.map.setCenter(position);
|
|
// 根据标记位置获取地址信息
|
|
const geocoder = new google.maps.Geocoder();
|
|
geocoder.geocode({ location: position }, (results, status) => {
|
|
if (status === 'OK' && results[0]) {
|
|
console.log(results)
|
|
console.log(position)
|
|
that.cityInfo.address = results[0].formatted_address;
|
|
that.cityInfo.lat = position.lat();
|
|
that.cityInfo.lng = position.lng();
|
|
that.value = results[0].formatted_address;
|
|
console.log(that.cityInfo)
|
|
} else {
|
|
alert('无法获取地址信息');
|
|
}
|
|
});
|
|
});
|
|
},
|
|
unigetLocation(){
|
|
var that = this
|
|
uni.getLocation({
|
|
type: 'wgs84', // 默认为 wgs84 坐标系，可选 gcj02
|
|
success: function (res) {
|
|
console.log('当前位置的经度：' + res.longitude);
|
|
console.log('当前位置的纬度：' + res.latitude);
|
|
that.addmapmarkfn(res.latitude,res.longitude)
|
|
// 如果需要将经纬度转换为具体地址，可以使用逆地理编码
|
|
// 这里调用 uni.chooseLocation 或第三方地图服务（如高德、腾讯地图）
|
|
},
|
|
fail: function (err) {
|
|
console.log('获取位置失败：', err);
|
|
},
|
|
complete: function () {
|
|
console.log('获取位置完成');
|
|
}
|
|
});
|
|
},
|
|
initMap() {
|
|
var that = this
|
|
loader
|
|
.load()
|
|
.then((google) => {
|
|
if(this.center.lat!=''){
|
|
that.addmapmarkfn(parseFloat(this.center.lat),parseFloat(this.center.lng))
|
|
}else{
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
console.log('当前位置的经度：' + position.coords.longitude);
|
|
console.log('当前位置的纬度：' + position.coords.latitude);
|
|
that.addmapmarkfn(position.coords.latitude,position.coords.longitude)
|
|
this.error = '';
|
|
console.log("获取位置成功：", position);
|
|
},
|
|
(error) => {
|
|
that.unigetLocation()
|
|
// this.error = this.getErrorMessage(error);
|
|
// uni.showToast({
|
|
// title: this.error,
|
|
// icon: 'none'
|
|
// });
|
|
console.error("获取位置失败：", error);
|
|
},
|
|
{
|
|
enableHighAccuracy: true,
|
|
timeout: 10000,
|
|
maximumAge: 0
|
|
}
|
|
);
|
|
} else {
|
|
that.unigetLocation()
|
|
// this.error = "浏览器不支持 Geolocation API";
|
|
// uni.showToast({
|
|
// title: this.error,
|
|
// icon: 'none'
|
|
// });
|
|
console.error("浏览器不支持 Geolocation API");
|
|
}
|
|
}
|
|
|
|
|
|
})
|
|
.catch((e) => {
|
|
console.log(e)
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.search {
|
|
flex: 1;
|
|
height: 70rpx;
|
|
padding: 0 30rpx;
|
|
margin-right: 20rpx;
|
|
border: 1rpx solid #ccc;
|
|
border-radius: 10rpx;
|
|
}
|
|
.btn {
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
padding: 0 20rpx;
|
|
background: #3c9cff;
|
|
border-radius: 10rpx;
|
|
}
|
|
.card {
|
|
position: fixed;width: 100%; top:60px;
|
|
background-color: white;
|
|
padding: 0 30rpx;
|
|
.item {
|
|
padding: 20rpx 0;
|
|
border-bottom: 2rpx solid #ccc;
|
|
.title {
|
|
margin-right: 20rpx;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
</style>
|