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: [],
		cityInfo:{
			lat: '',
			lng: '',
			country: "", //国家
			province: "", //省
			city: "", //市
			district: "", //区
			street: "", //街道	
			door: "", //门牌号
			address: "", //详细地址
		}
	}
  },
  onLoad() {
		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 =[]
		},
	    initMap() {
			var that = this
		  loader
		    .load()
		    .then((google) => {
				uni.getLocation({
				  type: 'wgs84', // 默认为 wgs84 坐标系，可选 gcj02
				  success: function (res) {
						  console.log(res)
						that.map = new google.maps.Map(document.getElementById("map"),
						  {
						    center: { lat:res.latitude, lng: res.longitude},
						    zoom: 12,// 地图缩放参数
						  	maxZoom: 18,// 最大缩放参数
						  	minZoom: 4,// 最小缩放参数		
						    disableDefaultUI: true// 禁用默认UI
						  }
						)
						var marker = new google.maps.Marker({
							position: { lat:res.latitude, lng: res.longitude},
							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('无法获取地址信息');
						      }
						    });
						});
				  },
				  fail: function (err) {
				    console.log('获取位置失败：', err);
				  },
				  complete: function () {
				    console.log('获取位置完成');
				  }
				})
		      
		    })
		    .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>