名片部分页面。地图定位。国家下拉搜索 回收站
This commit is contained in:
浅念
+96
-51
@@ -31,6 +31,7 @@ export default {
|
||||
value: '',
|
||||
// 模糊匹配数据
|
||||
list: [],
|
||||
center: { lat:'', lng:''},
|
||||
cityInfo:{
|
||||
lat: '',
|
||||
lng: '',
|
||||
@@ -44,7 +45,12 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
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:{
|
||||
@@ -92,63 +98,102 @@ export default {
|
||||
});
|
||||
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) => {
|
||||
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)
|
||||
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'
|
||||
});
|
||||
// 监听标记拖动事件
|
||||
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('获取位置完成');
|
||||
}
|
||||
})
|
||||
console.error("浏览器不支持 Geolocation API");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
.catch((e) => {
|
||||
|
||||
Reference in New Issue
Block a user