xinyouhe/crm-uni
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面功能修改

Browse Source
This commit is contained in:
浅念
2025-03-21 17:57:32 +08:00
parent ddcf63d131
commit 7d1884ad0b
18 changed files with 1403 additions and 590 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/customer/maph5.vue
+96 -125
View File
@@ -2,9 +2,18 @@
<view>
<view id="map" style="height: 100vh;"></view>
<!-- 输入框事件 -->
<view class="search-box">
<input id="search-box" type="text" v-model="cityInfo.address" @input="ListeningInputBox" placeholder="请输入搜索地址...">
<view id="btn">确定</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>
@@ -12,13 +21,17 @@
import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({
// google服务的KEY
apiKey: "AIzaSyBGvV-vX7C72PEbcYrTdmUj3qrubejWzNw",
apiKey: "AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I",
version: "weekly",
libraries: ["places"]
});
export default {
data() {
return {
map:'',
value: '',
// 模糊匹配数据
list: [],
cityInfo:{
lat: '',
lng: '',
@@ -36,6 +49,50 @@ export default {
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
@@ -45,7 +102,7 @@ export default {
type: 'wgs84', // 默认为 wgs84 坐标系，可选 gcj02
success: function (res) {
console.log(res)
const map = new google.maps.Map(document.getElementById("map"),
that.map = new google.maps.Map(document.getElementById("map"),
{
center: { lat:res.latitude, lng: res.longitude},
zoom: 12,// 地图缩放参数
@@ -56,7 +113,7 @@ export default {
)
var marker = new google.maps.Marker({
position: { lat:res.latitude, lng: res.longitude},
map: map,
map: that.map,
draggable: true, // 允许拖动标记
icon: {
url: 'https://now.guua.com/attachs/default/location_shop.png',
@@ -68,7 +125,7 @@ export default {
// 监听标记拖动事件
marker.addListener('dragend', () => {
const position = marker.getPosition();
map.setCenter(position);
that.map.setCenter(position);
// 根据标记位置获取地址信息
const geocoder = new google.maps.Geocoder();
geocoder.geocode({ location: position }, (results, status) => {
@@ -78,12 +135,8 @@ export default {
that.cityInfo.address = results[0].formatted_address;
that.cityInfo.lat = position.lat();
that.cityInfo.lng = position.lng();
console.log(that.cityInfo)
// cityInfo.address = results[0].formatted_address;
// updateInfo({
// formatted_address: results[0].formatted_address,
// geometry: { location: position },
// });
that.value = results[0].formatted_address;
console.log(that.cityInfo)
} else {
alert('无法获取地址信息');
}
@@ -102,121 +155,39 @@ export default {
.catch((e) => {
console.log(e)
})
},
ListeningInputBox() {
// 创建 Autocomplete 实例
const input = document.getElementById("search-box");
const autocomplete = new google.maps.places.AutocompleteService();
// 设置 Autocomplete 参数
// autocomplete.setFields(["geometry", "name"]);
// 添加事件监听器，当用户选择某个地点时，在地图上标记出所选位置
// LoadAnimation(true)
autocomplete.getPlacePredictions(this.cityInfo.address, function() {
const place = autocomplete.getPlace();
var latlng = JSON.parse(JSON.stringify(place.geometry.location))
console.log("place===", latlng)
getAddress(latlng.lat, latlng.lng);
if (!place.geometry) {
console.log("返回的地理信息无效！");
return;
}
// 将地图中心点指向用户所选位置，并设置标记
if (searchmarker) { //去除marker标记点
searchmarker.setMap(null)
searchmarker = ""
}
map.setCenter(place.geometry.location);
searchmarker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name,
});
});
},
getAddress(latitude, longitude) {
var that=this
// 根据经纬度发起 Reverse Geocoding API 请求，获取地址信息
var geocoder = new google.maps.Geocoder();
var latlng = {
lat: latitude,
lng: longitude
};
this.cityInfo.lats = latitude
this.cityInfo.lng = longitude
geocoder.geocode({
location: latlng
}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
console.log(results[0])
for (var i = 0; i < results.length; i++) {
var components = results[i].address_components;
for (var j = 0; j < components.length; j++) {
var component = components[j];
if (component.types.includes("country")) {
console.log("国家: ====>" + component.long_name);
cityInfo.country = component.long_name || '暂无';
} else if (component.types.includes("administrative_area_level_1")) {
console.log("省/州: ====>" + component.long_name);
cityInfo.province = component.long_name || '暂无';
} else if (component.types.includes("locality")) {
console.log("城市: ====> " + component.long_name);
cityInfo.city = component.long_name || '暂无';
} else if (component.types.includes("sublocality_level_1")) {
console.log("区/县: ====>" + component.long_name);
cityInfo.district = component.long_name || '暂无';
} else if (component.types.includes("route")) {
console.log("路/街道名: ====> " + component.long_name);
cityInfo.street = component.long_name || '暂无';
} else if (component.types.includes("street_number")) {
console.log("门牌号: ====> " + component.long_name);
cityInfo.door = component.long_name || '暂无';
}
}
}
that.cityInfo.address = results[0].formatted_address;
console.log("cityInfo==========", that.cityInfo)
// addInfo(cityInfo)
} else {
alert('找不到地址信息');
}
} else {
alert('获取地址信息失败：' + status);
}
});
}
},
}
</script>
<style lang="scss">
.search-box{
width: 99%;
left: 2%;
top: 80px;
font-size: 12px;
position: fixed;
padding: 5px;
display: flex;
align-items: center;
}
#search-box {
height: 30px;
padding: 5px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ccc;
box-shadow: 0px 1px 3px #ddd;
width:70%;
background: #fff;
}
#btn{
padding: 10px 20px;
text-align: center;
background: #fff;
border: 1px solid #bbbbbb;
border-radius: 6px;
margin-left: 10px;
}
.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>