crm-uni/pages/customer/maph5.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('无法获取地址信息');
			      }
			    });
			});
		},
	    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) => {
								this.error = this.getErrorMessage(error);
								uni.showToast({
									title: this.error,
									icon: 'none'
								});
								console.error("获取位置失败：", error);
							},
							{
								enableHighAccuracy: true,
								timeout: 10000,
								maximumAge: 0
							}
						);
					} else {
						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>