浅念
223 lines
6.6 KiB
Vue
223 lines
6.6 KiB
Vue
<template>
|
|
<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>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { Loader } from "@googlemaps/js-api-loader";
|
|
const loader = new Loader({
|
|
// google服务的KEY
|
|
apiKey: "AIzaSyBGvV-vX7C72PEbcYrTdmUj3qrubejWzNw",
|
|
version: "weekly",
|
|
libraries: ["places"]
|
|
});
|
|
export default {
|
|
data() {
|
|
return {
|
|
cityInfo:{
|
|
lat: '',
|
|
lng: '',
|
|
country: "", //国家
|
|
province: "", //省
|
|
city: "", //市
|
|
district: "", //区
|
|
street: "", //街道
|
|
door: "", //门牌号
|
|
address: "", //详细地址
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.initMap()
|
|
},
|
|
methods:{
|
|
initMap() {
|
|
var that = this
|
|
loader
|
|
.load()
|
|
.then((google) => {
|
|
uni.getLocation({
|
|
type: 'wgs84', // 默认为 wgs84 坐标系，可选 gcj02
|
|
success: function (res) {
|
|
console.log(res)
|
|
const 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: 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();
|
|
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();
|
|
console.log(that.cityInfo)
|
|
// cityInfo.address = results[0].formatted_address;
|
|
// updateInfo({
|
|
// formatted_address: results[0].formatted_address,
|
|
// geometry: { location: position },
|
|
// });
|
|
} else {
|
|
alert('无法获取地址信息');
|
|
}
|
|
});
|
|
});
|
|
},
|
|
fail: function (err) {
|
|
console.log('获取位置失败：', err);
|
|
},
|
|
complete: function () {
|
|
console.log('获取位置完成');
|
|
}
|
|
})
|
|
|
|
})
|
|
.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;
|
|
}
|
|
</style>
|