|
|
@@ -9,78 +9,19 @@
|
|
|
@keyup.enter="selectPoint"
|
|
|
/>
|
|
|
<button style="margin-left: 10px;" @click="selectPoint">{{$t('mendian.SearchAddress')}}</button>
|
|
|
- <button style="margin-left: 10px;" @click="getCurrentLocation" :disabled="isGettingLocation" title="使用GPS获取当前位置">
|
|
|
- <i v-if="isGettingLocation" class="el-icon-loading"></i>
|
|
|
- GPS定位
|
|
|
- </button>
|
|
|
<div style="margin-left: 20px;">{{$t('mendian.currentlocation')}}:{{address}}</div>
|
|
|
</div>
|
|
|
- <div style="margin-bottom: 10px; font-size: 12px; color: #666;">
|
|
|
- <i class="el-icon-info"></i>
|
|
|
- 提示:点击地图选择位置,系统会自动获取详细地址信息
|
|
|
- </div>
|
|
|
<!-- 添加地址选择提示 -->
|
|
|
- <div v-if="isLoadingAddress" style="background-color: #f0f9ff; color: #1890ff; padding: 10px; margin-bottom: 10px; border-radius: 4px; display: flex; align-items: center;">
|
|
|
- <i class="el-icon-loading" style="margin-right: 8px;"></i>
|
|
|
- 正在获取地址信息...
|
|
|
- </div>
|
|
|
- <div v-else-if="!address" style="background-color: #fef0f0; color: #f56c6c; padding: 10px; margin-bottom: 10px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between;">
|
|
|
- <div style="display: flex; align-items: center;">
|
|
|
- <i class="el-icon-warning" style="margin-right: 8px;"></i>
|
|
|
- {{$t('mendian.Selectmapobtainaddress')}}
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-button size="mini" type="primary" @click="refreshAddress" :loading="isLoadingAddress">
|
|
|
- <i class="el-icon-refresh"></i>
|
|
|
- 重新获取
|
|
|
- </el-button>
|
|
|
- <el-button size="mini" type="success" @click="testAddress" style="margin-left: 5px;">
|
|
|
- <i class="el-icon-location"></i>
|
|
|
- 测试地址
|
|
|
- </el-button>
|
|
|
- <el-button size="mini" type="warning" @click="quickTestAddress" style="margin-left: 5px;">
|
|
|
- <i class="el-icon-lightning"></i>
|
|
|
- 快速测试
|
|
|
- </el-button>
|
|
|
- <el-button size="mini" type="info" @click="testSearch" style="margin-left: 5px;">
|
|
|
- <i class="el-icon-search"></i>
|
|
|
- 测试搜索
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 地址选择器 -->
|
|
|
- <div v-if="addressOptions.length > 1" style="background-color: #f8f9fa; padding: 12px; margin-bottom: 10px; border-radius: 6px; border: 1px solid #e9ecef;">
|
|
|
- <div style="margin-bottom: 8px; font-weight: bold; color: #303133; font-size: 14px;">
|
|
|
- <i class="el-icon-location" style="margin-right: 5px; color: #409EFF;"></i>
|
|
|
- 选择最准确的地址:
|
|
|
- </div>
|
|
|
- <div v-for="(option, index) in addressOptions" :key="index"
|
|
|
- style="margin-bottom: 6px; padding: 8px 12px; border-radius: 4px; cursor: pointer; border: 1px solid #dee2e6; transition: all 0.2s ease;"
|
|
|
- :style="selectedAddressIndex === index ? 'background-color: #f0f9ff; border-color: #409EFF; border-width: 2px;' : 'background-color: white;'"
|
|
|
- @click="selectAddressOption(index)">
|
|
|
- <div style="font-size: 13px; color: #303133; line-height: 1.4;">{{ option.address }}</div>
|
|
|
- <div style="font-size: 11px; color: #909399; margin-top: 2px;">
|
|
|
- 类型: {{ getAddressTypeText(option.types) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="margin-top: 8px; text-align: center;">
|
|
|
- <el-button size="mini" type="primary" @click="confirmSelectedAddress" style="padding: 6px 15px; margin-right: 8px;">
|
|
|
- <i class="el-icon-check"></i>
|
|
|
- 确认选择
|
|
|
- </el-button>
|
|
|
- <el-button size="mini" @click="cancelAddressSelection" style="padding: 6px 15px;">
|
|
|
- <i class="el-icon-close"></i>
|
|
|
- 取消
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
+ <div v-if="!address" style="background-color: #fef0f0; color: #f56c6c; padding: 10px; margin-bottom: 10px; border-radius: 4px; display: flex; align-items: center;">
|
|
|
+ <i class="el-icon-warning" style="margin-right: 8px;"></i>
|
|
|
+ {{$t('mendian.Selectmapobtainaddress')}}
|
|
|
</div>
|
|
|
<div :style="googleMapStyle" class="googleMap" :id="mapID"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {getfenlei,storelistlist} from '@/api/store';
|
|
|
+import {getfenlei,storelistlist,getAddr} from '@/api/store';
|
|
|
import { Loader } from '@googlemaps/js-api-loader' //引入
|
|
|
export default {
|
|
|
name:'googmap',
|
|
|
@@ -157,19 +98,10 @@ export default {
|
|
|
graphicalExample: null,
|
|
|
//图形路径经纬度
|
|
|
graphicalPath: [],
|
|
|
- apiKey: 'AIzaSyDRpbm3HCpmUjfaPu3TgklBGwWJWrvIXDw', //旧的AIzaSyAnz_I0VUlPvt73NIocb_7tomJOW4CdwHk
|
|
|
- googleMap:null,
|
|
|
- address:'',
|
|
|
- ssneir:'',
|
|
|
- isLoadingAddress: false,
|
|
|
- isGettingLocation: false,
|
|
|
- // 地址缓存
|
|
|
- addressCache: new Map(),
|
|
|
- // 地址选项
|
|
|
- addressOptions: [],
|
|
|
- selectedAddressIndex: 0,
|
|
|
- // 地理定位错误标志
|
|
|
- locationErrorShown: false
|
|
|
+ apiKey: 'AIzaSyBt-bYNprVqfpY3fPgoOj0RKbnC_g7ii1k', //旧的AIzaSyAnz_I0VUlPvt73NIocb_7tomJOW4CdwHk
|
|
|
+ googleMap: null,
|
|
|
+ address: '',
|
|
|
+ ssneir: ''
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -182,9 +114,9 @@ export default {
|
|
|
language: this.$t('loding.language'),
|
|
|
})
|
|
|
const mapOptions = {
|
|
|
- center: { lat: this.googleMapCenter.lat * 1, lng: this.googleMapCenter.lng * 1 }, //中心点
|
|
|
+ center: {lat: this.googleMapCenter.lat * 1, lng: this.googleMapCenter.lng * 1}, //中心点
|
|
|
zoom: this.zoom, //缩放级别
|
|
|
- mapId:this.mapID,
|
|
|
+ mapId: this.mapID,
|
|
|
...this.mapOptions, //其他配置
|
|
|
}
|
|
|
loader.load().then(async (google) => {
|
|
|
@@ -202,586 +134,53 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- methods:{
|
|
|
- // 逆向地址 - 使用Google Maps API(无需后端接口)
|
|
|
- getdizhi(lat){
|
|
|
- console.log('getdizhi 被调用,坐标:', lat);
|
|
|
-
|
|
|
- // 检查缓存
|
|
|
- const cacheKey = this.getCacheKey(lat);
|
|
|
- if (this.addressCache.has(cacheKey)) {
|
|
|
- const cachedAddress = this.addressCache.get(cacheKey);
|
|
|
- console.log('使用缓存地址:', cachedAddress);
|
|
|
- this.address = cachedAddress;
|
|
|
- this.$emit('golat', {lat: lat, address: cachedAddress});
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 直接使用Google Maps API,无需后端接口
|
|
|
- this.getAddressFromGoogleMaps(lat);
|
|
|
- },
|
|
|
-
|
|
|
- // 生成缓存键
|
|
|
- getCacheKey(lat) {
|
|
|
- const latlng = lat.split(',');
|
|
|
- // 将坐标四舍五入到小数点后4位,减少缓存键数量
|
|
|
- const roundedLat = Math.round(parseFloat(latlng[0]) * 10000) / 10000;
|
|
|
- const roundedLng = Math.round(parseFloat(latlng[1]) * 10000) / 10000;
|
|
|
- return `${roundedLat},${roundedLng}`;
|
|
|
- },
|
|
|
-
|
|
|
- // 选择最佳地址
|
|
|
- selectBestAddress(results) {
|
|
|
- if (!results || results.length === 0) {
|
|
|
- return '地址获取失败';
|
|
|
- }
|
|
|
-
|
|
|
- // 优先级排序:具体地址 > 兴趣点 > 街道 > 区域
|
|
|
- const priorityOrder = [
|
|
|
- 'street_address', // 街道地址
|
|
|
- 'premise', // 建筑物
|
|
|
- 'subpremise', // 子建筑物
|
|
|
- 'point_of_interest', // 兴趣点
|
|
|
- 'establishment', // 机构
|
|
|
- 'neighborhood', // 社区
|
|
|
- 'sublocality', // 子区域
|
|
|
- 'route', // 路线
|
|
|
- 'locality', // 区域
|
|
|
- 'administrative_area_level_3', // 三级行政区
|
|
|
- 'administrative_area_level_2', // 二级行政区
|
|
|
- 'administrative_area_level_1' // 一级行政区
|
|
|
- ];
|
|
|
-
|
|
|
- // 按优先级排序结果
|
|
|
- const sortedResults = results.sort((a, b) => {
|
|
|
- const aTypes = a.types || [];
|
|
|
- const bTypes = b.types || [];
|
|
|
-
|
|
|
- const aPriority = Math.min(...aTypes.map(type =>
|
|
|
- priorityOrder.indexOf(type) === -1 ? 999 : priorityOrder.indexOf(type)
|
|
|
- ));
|
|
|
- const bPriority = Math.min(...bTypes.map(type =>
|
|
|
- priorityOrder.indexOf(type) === -1 ? 999 : priorityOrder.indexOf(type)
|
|
|
- ));
|
|
|
-
|
|
|
- return aPriority - bPriority;
|
|
|
- });
|
|
|
-
|
|
|
- // 只保留前两个最佳结果
|
|
|
- const topResults = sortedResults.slice(0, 2);
|
|
|
- const bestResult = topResults[0];
|
|
|
- let bestAddress = bestResult.formatted_address;
|
|
|
-
|
|
|
- // 尝试构建更精确的地址
|
|
|
- const addressComponents = bestResult.address_components || [];
|
|
|
-
|
|
|
- // 查找具体的地点名称
|
|
|
- const establishment = addressComponents.find(comp =>
|
|
|
- comp.types.includes('establishment') ||
|
|
|
- comp.types.includes('point_of_interest')
|
|
|
- );
|
|
|
-
|
|
|
- const premise = addressComponents.find(comp =>
|
|
|
- comp.types.includes('premise') ||
|
|
|
- comp.types.includes('subpremise')
|
|
|
- );
|
|
|
-
|
|
|
- // 查找社区和子区域信息
|
|
|
- const neighborhood = addressComponents.find(comp =>
|
|
|
- comp.types.includes('neighborhood') ||
|
|
|
- comp.types.includes('sublocality')
|
|
|
- );
|
|
|
-
|
|
|
- // 如果有具体的地点名称,优先使用
|
|
|
- if (establishment) {
|
|
|
- const streetNumber = addressComponents.find(comp => comp.types.includes('street_number'));
|
|
|
- const route = addressComponents.find(comp => comp.types.includes('route'));
|
|
|
-
|
|
|
- if (streetNumber && route) {
|
|
|
- bestAddress = `${streetNumber.long_name} ${route.long_name}, ${establishment.long_name}`;
|
|
|
- } else if (route) {
|
|
|
- bestAddress = `${route.long_name}, ${establishment.long_name}`;
|
|
|
- } else {
|
|
|
- bestAddress = establishment.long_name;
|
|
|
- }
|
|
|
- } else if (premise) {
|
|
|
- const streetNumber = addressComponents.find(comp => comp.types.includes('street_number'));
|
|
|
- const route = addressComponents.find(comp => comp.types.includes('route'));
|
|
|
-
|
|
|
- if (streetNumber && route) {
|
|
|
- bestAddress = `${streetNumber.long_name} ${route.long_name}, ${premise.long_name}`;
|
|
|
- } else if (route) {
|
|
|
- bestAddress = `${route.long_name}, ${premise.long_name}`;
|
|
|
- } else {
|
|
|
- bestAddress = premise.long_name;
|
|
|
- }
|
|
|
- } else if (neighborhood) {
|
|
|
- // 如果有社区信息,使用社区名称
|
|
|
- const route = addressComponents.find(comp => comp.types.includes('route'));
|
|
|
- if (route) {
|
|
|
- bestAddress = `${route.long_name}, ${neighborhood.long_name}`;
|
|
|
- } else {
|
|
|
- bestAddress = neighborhood.long_name;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 添加城市信息
|
|
|
- const city = addressComponents.find(comp =>
|
|
|
- comp.types.includes('locality') ||
|
|
|
- comp.types.includes('administrative_area_level_2')
|
|
|
- );
|
|
|
-
|
|
|
- if (city && !bestAddress.includes(city.long_name)) {
|
|
|
- bestAddress += `, ${city.long_name}`;
|
|
|
- }
|
|
|
-
|
|
|
- // 如果有两个结果,提供选择
|
|
|
- if (topResults.length > 1) {
|
|
|
- this.addressOptions = topResults.map((result, index) => ({
|
|
|
- index: index,
|
|
|
- address: result.formatted_address,
|
|
|
- types: result.types,
|
|
|
- location: result.geometry.location
|
|
|
- }));
|
|
|
- this.selectedAddressIndex = 0;
|
|
|
+ methods: {
|
|
|
+ // 逆向地址
|
|
|
+ getdizhi(lat) {
|
|
|
+ var user = JSON.parse(localStorage.getItem('user'));
|
|
|
+
|
|
|
+ var params = {
|
|
|
+ latlng: lat,
|
|
|
+ id: user.id
|
|
|
}
|
|
|
-
|
|
|
- return bestAddress;
|
|
|
- },
|
|
|
-
|
|
|
- // 使用Google Maps API获取地址(无需后端接口)
|
|
|
- getAddressFromGoogleMaps(lat) {
|
|
|
- console.log('使用Google Maps API获取地址,坐标:', lat);
|
|
|
- this.isLoadingAddress = true;
|
|
|
-
|
|
|
- if (!this.googleApi || !this.googleMap) {
|
|
|
- console.error('Google API 或地图未初始化');
|
|
|
- this.isLoadingAddress = false;
|
|
|
- this.$message.error('地图未初始化,请刷新页面重试');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const geocoder = new this.googleApi.maps.Geocoder();
|
|
|
- const latlng = lat.split(',');
|
|
|
- const latlngObj = {
|
|
|
- lat: parseFloat(latlng[0]),
|
|
|
- lng: parseFloat(latlng[1])
|
|
|
- };
|
|
|
-
|
|
|
- console.log('开始Google Maps地理编码,坐标对象:', latlngObj);
|
|
|
-
|
|
|
- // 设置超时
|
|
|
- const timeoutId = setTimeout(() => {
|
|
|
- if (this.isLoadingAddress) {
|
|
|
- console.warn('Google Maps地理编码超时');
|
|
|
- this.isLoadingAddress = false;
|
|
|
- this.$message.warning('地址获取超时,请重试');
|
|
|
- this.$emit('golat', {lat: lat, address: '地址获取超时'});
|
|
|
- }
|
|
|
- }, 15000); // 增加到15秒
|
|
|
-
|
|
|
- geocoder.geocode({
|
|
|
- location: latlngObj,
|
|
|
- language: 'zh-CN'
|
|
|
- }, (results, status) => {
|
|
|
- clearTimeout(timeoutId);
|
|
|
- this.isLoadingAddress = false;
|
|
|
-
|
|
|
- console.log('Google Maps地理编码回调,状态:', status, '结果数量:', results ? results.length : 0);
|
|
|
-
|
|
|
- if (status === 'OK' && results.length > 0) {
|
|
|
- console.log('Google Maps地理编码成功,结果:', results);
|
|
|
-
|
|
|
- // 显示所有地址选项
|
|
|
- this.addressOptions = results.map(result => ({
|
|
|
- address: result.formatted_address,
|
|
|
- types: result.types || [],
|
|
|
- result: result
|
|
|
- }));
|
|
|
-
|
|
|
- // 优先选择最精确的地址
|
|
|
- let bestAddress = this.selectBestAddress(results);
|
|
|
- console.log('选择的最佳地址:', bestAddress);
|
|
|
-
|
|
|
- // 缓存地址
|
|
|
- const cacheKey = this.getCacheKey(lat);
|
|
|
- this.addressCache.set(cacheKey, bestAddress);
|
|
|
-
|
|
|
- this.address = bestAddress;
|
|
|
- this.$emit('golat', {lat: lat, address: bestAddress});
|
|
|
- } else {
|
|
|
- console.error('Google Maps地理编码失败:', status, '错误信息:', results);
|
|
|
- // 尝试简单的地理编码
|
|
|
- this.trySimpleGeocoding(lat);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 简单地理编码(备用方案)
|
|
|
- trySimpleGeocoding(lat) {
|
|
|
- console.log('尝试简单地理编码,坐标:', lat);
|
|
|
- this.isLoadingAddress = true;
|
|
|
-
|
|
|
- if (!this.googleApi || !this.googleMap) {
|
|
|
- this.isLoadingAddress = false;
|
|
|
- this.$message.error('地图未初始化');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const geocoder = new this.googleApi.maps.Geocoder();
|
|
|
- const latlng = lat.split(',');
|
|
|
- const latlngObj = {
|
|
|
- lat: parseFloat(latlng[0]),
|
|
|
- lng: parseFloat(latlng[1])
|
|
|
- };
|
|
|
-
|
|
|
- // 设置更短的超时
|
|
|
- const timeoutId = setTimeout(() => {
|
|
|
- if (this.isLoadingAddress) {
|
|
|
- console.warn('简单地理编码也超时');
|
|
|
- this.isLoadingAddress = false;
|
|
|
- this.$message.warning('地址获取失败,请重试');
|
|
|
- this.$emit('golat', {lat: lat, address: '地址获取失败'});
|
|
|
- }
|
|
|
- }, 8000);
|
|
|
-
|
|
|
- geocoder.geocode({
|
|
|
- location: latlngObj
|
|
|
- }, (results, status) => {
|
|
|
- clearTimeout(timeoutId);
|
|
|
- this.isLoadingAddress = false;
|
|
|
-
|
|
|
- console.log('简单地理编码回调,状态:', status, '结果数量:', results ? results.length : 0);
|
|
|
-
|
|
|
- if (status === 'OK' && results.length > 0) {
|
|
|
- const address = results[0].formatted_address;
|
|
|
- console.log('简单地理编码成功:', address);
|
|
|
-
|
|
|
- // 缓存地址
|
|
|
- const cacheKey = this.getCacheKey(lat);
|
|
|
- this.addressCache.set(cacheKey, address);
|
|
|
-
|
|
|
- this.address = address;
|
|
|
- this.$emit('golat', {lat: lat, address: address});
|
|
|
- } else {
|
|
|
- console.error('简单地理编码也失败:', status);
|
|
|
- this.$message.error('地址获取失败,请重试');
|
|
|
- this.$emit('golat', {lat: lat, address: '地址获取失败'});
|
|
|
- }
|
|
|
- });
|
|
|
+ getAddr(params).then(res => {
|
|
|
+ console.log('地址', res)
|
|
|
+ this.address = res.data.address
|
|
|
+ this.$emit('golat', {lat: lat, address: res.data.address})
|
|
|
+ })
|
|
|
},
|
|
|
-
|
|
|
//搜索地点方法
|
|
|
selectPoint() {
|
|
|
- if (!this.ssneir) {
|
|
|
- this.$message.warning('请输入搜索关键词');
|
|
|
- return;
|
|
|
- }
|
|
|
+ if (!this.ssneir) return;
|
|
|
if (!this.googleApi || !this.googleMap) return;
|
|
|
-
|
|
|
- // 使用PlacesService进行文本搜索
|
|
|
const service = new this.googleApi.maps.places.PlacesService(this.googleMap);
|
|
|
- service.textSearch({
|
|
|
- query: this.ssneir,
|
|
|
- fields: ['name', 'formatted_address', 'geometry', 'place_id', 'types'],
|
|
|
- location: new this.googleApi.maps.LatLng(22.817002, 108.366543), // 南宁市中心
|
|
|
- radius: 50000 // 50公里半径
|
|
|
- }, (results, status) => {
|
|
|
+ service.textSearch({query: this.ssneir}, (results, status) => {
|
|
|
if (status === this.googleApi.maps.places.PlacesServiceStatus.OK && results.length > 0) {
|
|
|
- const result = results[0];
|
|
|
- const loc = result.geometry.location;
|
|
|
+ const loc = results[0].geometry.location;
|
|
|
const lat = loc.lat();
|
|
|
const lng = loc.lng();
|
|
|
-
|
|
|
- console.log('搜索成功,结果:', result);
|
|
|
-
|
|
|
- this.googleMap.setCenter({ lat, lng });
|
|
|
+ this.googleMap.setCenter({lat, lng});
|
|
|
this.googleMap.setZoom(15);
|
|
|
-
|
|
|
if (this.marker) this.marker.map = null;
|
|
|
this.marker = new this.googMarker.AdvancedMarkerElement({
|
|
|
map: this.googleMap,
|
|
|
- position: { lat, lng },
|
|
|
+ position: {lat, lng},
|
|
|
});
|
|
|
-
|
|
|
- // 优先使用搜索结果的地址,如果不够精确再使用地理编码
|
|
|
- if (result.formatted_address && this.isDetailedAddress(result.formatted_address)) {
|
|
|
- console.log('使用搜索结果地址:', result.formatted_address);
|
|
|
- this.address = result.formatted_address;
|
|
|
- this.longlat = lat + ',' + lng;
|
|
|
- this.$emit('golat', {lat: lat + ',' + lng, address: result.formatted_address});
|
|
|
- // 清除地址选项
|
|
|
- this.addressOptions = [];
|
|
|
- this.selectedAddressIndex = -1;
|
|
|
- } else {
|
|
|
- // 使用地理编码获取更精确的地址
|
|
|
- this.longlat = lat + ',' + lng;
|
|
|
- this.getdizhi(lat + ',' + lng);
|
|
|
- }
|
|
|
- } else {
|
|
|
- console.error('搜索失败,状态:', status);
|
|
|
- // 尝试使用地理编码作为备用方案
|
|
|
- this.tryGeocodingSearch();
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 使用地理编码进行搜索(备用方案)
|
|
|
- tryGeocodingSearch() {
|
|
|
- console.log('尝试使用地理编码搜索:', this.ssneir);
|
|
|
-
|
|
|
- if (!this.googleApi || !this.googleMap) {
|
|
|
- this.$message.error('地图未初始化');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const geocoder = new this.googleApi.maps.Geocoder();
|
|
|
- geocoder.geocode({
|
|
|
- address: this.ssneir,
|
|
|
- language: 'zh-CN',
|
|
|
- region: 'CN' // 限制在中国
|
|
|
- }, (results, status) => {
|
|
|
- if (status === 'OK' && results.length > 0) {
|
|
|
- const result = results[0];
|
|
|
- const loc = result.geometry.location;
|
|
|
- const lat = loc.lat();
|
|
|
- const lng = loc.lng();
|
|
|
-
|
|
|
- console.log('地理编码搜索成功,结果:', result);
|
|
|
-
|
|
|
- this.googleMap.setCenter({ lat, lng });
|
|
|
- this.googleMap.setZoom(15);
|
|
|
-
|
|
|
- if (this.marker) this.marker.map = null;
|
|
|
- this.marker = new this.googMarker.AdvancedMarkerElement({
|
|
|
- map: this.googleMap,
|
|
|
- position: { lat, lng },
|
|
|
- });
|
|
|
-
|
|
|
- this.address = result.formatted_address;
|
|
|
- this.longlat = lat + ',' + lng;
|
|
|
- this.$emit('golat', {lat: lat + ',' + lng, address: result.formatted_address});
|
|
|
- // 清除地址选项
|
|
|
- this.addressOptions = [];
|
|
|
- this.selectedAddressIndex = -1;
|
|
|
- } else {
|
|
|
- console.error('地理编码搜索也失败:', status);
|
|
|
- this.$message.error('搜索失败,请重试');
|
|
|
+ this.getdizhi(lat + ',' + lng);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
- // 判断地址是否足够详细
|
|
|
- isDetailedAddress(address) {
|
|
|
- // 检查是否包含具体的地点名称、门牌号等
|
|
|
- const detailedIndicators = [
|
|
|
- /\d+号/, // 门牌号
|
|
|
- /小区/, // 小区
|
|
|
- /大厦/, // 大厦
|
|
|
- /广场/, // 广场
|
|
|
- /中心/, // 中心
|
|
|
- /商场/, // 商场
|
|
|
- /酒店/, // 酒店
|
|
|
- /学校/, // 学校
|
|
|
- /医院/, // 医院
|
|
|
- /银行/, // 银行
|
|
|
- /超市/, // 超市
|
|
|
- /餐厅/, // 餐厅
|
|
|
- /咖啡/, // 咖啡
|
|
|
- /公园/, // 公园
|
|
|
- /地铁/, // 地铁
|
|
|
- /公交/, // 公交
|
|
|
- /站/, // 车站
|
|
|
- /路\d+号/, // 路+门牌号
|
|
|
- /街\d+号/, // 街+门牌号
|
|
|
- /巷\d+号/ // 巷+门牌号
|
|
|
- ];
|
|
|
-
|
|
|
- return detailedIndicators.some(pattern => pattern.test(address));
|
|
|
- },
|
|
|
-
|
|
|
- // 选择地址选项
|
|
|
- selectAddressOption(index) {
|
|
|
- this.selectedAddressIndex = index;
|
|
|
- },
|
|
|
-
|
|
|
- // 确认选择的地址
|
|
|
- confirmSelectedAddress() {
|
|
|
- if (this.selectedAddressIndex >= 0 && this.addressOptions[this.selectedAddressIndex]) {
|
|
|
- const selectedOption = this.addressOptions[this.selectedAddressIndex];
|
|
|
- this.address = selectedOption.address;
|
|
|
- this.$emit('golat', {lat: this.longlat, address: selectedOption.address});
|
|
|
- // 清除地址选项,隐藏选择器
|
|
|
- this.addressOptions = [];
|
|
|
- this.selectedAddressIndex = -1;
|
|
|
- this.$message.success('地址选择成功');
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 取消地址选择
|
|
|
- cancelAddressSelection() {
|
|
|
- this.addressOptions = [];
|
|
|
- this.selectedAddressIndex = -1;
|
|
|
- this.address = '';
|
|
|
- this.$message.info('已取消地址选择');
|
|
|
- },
|
|
|
-
|
|
|
- // 获取地址类型的中文描述
|
|
|
- getAddressTypeText(types) {
|
|
|
- const typeMap = {
|
|
|
- 'street_address': '街道地址',
|
|
|
- 'premise': '建筑物',
|
|
|
- 'subpremise': '子建筑物',
|
|
|
- 'point_of_interest': '兴趣点',
|
|
|
- 'establishment': '机构',
|
|
|
- 'route': '路线',
|
|
|
- 'sublocality': '子区域',
|
|
|
- 'locality': '区域',
|
|
|
- 'administrative_area_level_3': '三级行政区',
|
|
|
- 'administrative_area_level_2': '二级行政区',
|
|
|
- 'administrative_area_level_1': '一级行政区',
|
|
|
- 'country': '国家',
|
|
|
- 'postal_code': '邮政编码',
|
|
|
- 'neighborhood': '社区',
|
|
|
- 'political': '政治区域',
|
|
|
- 'geocode': '地理编码',
|
|
|
- 'street_number': '门牌号',
|
|
|
- 'postal_town': '邮政城镇',
|
|
|
- 'administrative_area_level_4': '四级行政区',
|
|
|
- 'administrative_area_level_5': '五级行政区'
|
|
|
- };
|
|
|
-
|
|
|
- return types.map(type => typeMap[type] || type).join(', ');
|
|
|
- },
|
|
|
-
|
|
|
- // 手动刷新地址
|
|
|
- refreshAddress() {
|
|
|
- if (this.longlat) {
|
|
|
- console.log('手动刷新地址,坐标:', this.longlat);
|
|
|
- this.getdizhi(this.longlat);
|
|
|
- } else {
|
|
|
- this.$message.warning('请先在地图上选择位置');
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 测试地址获取
|
|
|
- testAddress() {
|
|
|
- if (this.longlat) {
|
|
|
- console.log('测试Google Maps地址获取,坐标:', this.longlat);
|
|
|
- // 清除缓存,强制重新获取
|
|
|
- const cacheKey = this.getCacheKey(this.longlat);
|
|
|
- this.addressCache.delete(cacheKey);
|
|
|
- this.getdizhi(this.longlat);
|
|
|
- } else {
|
|
|
- // 使用默认坐标测试
|
|
|
- const testCoords = '22.817002,108.366543'; // 南宁市中心坐标
|
|
|
- console.log('使用测试坐标测试Google Maps:', testCoords);
|
|
|
- this.getdizhi(testCoords);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 快速测试地址获取
|
|
|
- quickTestAddress() {
|
|
|
- const testCoords = '22.817002,108.366543'; // 南宁市中心坐标
|
|
|
- console.log('快速测试地址获取:', testCoords);
|
|
|
- this.getdizhi(testCoords);
|
|
|
- },
|
|
|
-
|
|
|
- // 测试搜索功能
|
|
|
- testSearch() {
|
|
|
- this.ssneir = '南宁嘉和城温泉小镇';
|
|
|
- console.log('测试搜索功能:', this.ssneir);
|
|
|
- this.selectPoint();
|
|
|
- },
|
|
|
//点击地图回调
|
|
|
clickGmap(e) {
|
|
|
- console.log('点击回调',e)
|
|
|
+ console.log('点击回调', e)
|
|
|
this.longlat = e.latLng.lat() + ',' + e.latLng.lng();
|
|
|
- console.log('更新坐标:', this.longlat);
|
|
|
-
|
|
|
- // 清除旧标记
|
|
|
- if (this.marker) {
|
|
|
- this.marker.map = null;
|
|
|
- }
|
|
|
-
|
|
|
- // 添加新标记
|
|
|
+ this.marker.map = null;
|
|
|
this.marker = new this.googMarker.AdvancedMarkerElement({
|
|
|
map: this.googleMap,
|
|
|
- position: { lat: e.latLng.lat(), lng: e.latLng.lng() },
|
|
|
+ position: {lat: e.latLng.lat(), lng: e.latLng.lng()},
|
|
|
});
|
|
|
-
|
|
|
- // 清除之前的地址选项和地址
|
|
|
- this.addressOptions = [];
|
|
|
- this.selectedAddressIndex = -1;
|
|
|
- this.address = '';
|
|
|
-
|
|
|
- // 获取地址
|
|
|
- console.log('开始获取地址...');
|
|
|
this.getdizhi(this.longlat);
|
|
|
},
|
|
|
- // 获取当前位置
|
|
|
- getCurrentLocation() {
|
|
|
- if (!navigator.geolocation) {
|
|
|
- this.$message.error('您的浏览器不支持地理定位');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- this.isGettingLocation = true;
|
|
|
-
|
|
|
- navigator.geolocation.getCurrentPosition(
|
|
|
- (position) => {
|
|
|
- const lat = position.coords.latitude;
|
|
|
- const lng = position.coords.longitude;
|
|
|
-
|
|
|
- // 更新地图中心
|
|
|
- this.googleMap.setCenter({ lat, lng });
|
|
|
- this.googleMap.setZoom(15);
|
|
|
-
|
|
|
- // 清除旧标记
|
|
|
- if (this.marker) this.marker.map = null;
|
|
|
-
|
|
|
- // 添加新标记
|
|
|
- this.marker = new this.googMarker.AdvancedMarkerElement({
|
|
|
- map: this.googleMap,
|
|
|
- position: { lat, lng },
|
|
|
- });
|
|
|
-
|
|
|
- // 获取地址
|
|
|
- this.getdizhi(lat + ',' + lng);
|
|
|
- this.isGettingLocation = false;
|
|
|
- },
|
|
|
- (error) => {
|
|
|
- this.isGettingLocation = false;
|
|
|
- let errorMessage = 'GPS定位失败';
|
|
|
- switch(error.code) {
|
|
|
- case error.PERMISSION_DENIED:
|
|
|
- errorMessage = 'GPS定位被拒绝,请在地图上手动选择位置';
|
|
|
- break;
|
|
|
- case error.POSITION_UNAVAILABLE:
|
|
|
- errorMessage = 'GPS定位不可用,请在地图上手动选择位置';
|
|
|
- break;
|
|
|
- case error.TIMEOUT:
|
|
|
- errorMessage = 'GPS定位超时,请在地图上手动选择位置';
|
|
|
- break;
|
|
|
- }
|
|
|
- // 只显示一次错误消息,避免重复
|
|
|
- if (!this.locationErrorShown) {
|
|
|
- this.$message.info(errorMessage);
|
|
|
- this.locationErrorShown = true;
|
|
|
- // 3秒后重置标志
|
|
|
- setTimeout(() => {
|
|
|
- this.locationErrorShown = false;
|
|
|
- }, 3000);
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- enableHighAccuracy: true,
|
|
|
- timeout: 10000,
|
|
|
- maximumAge: 60000
|
|
|
- }
|
|
|
- );
|
|
|
- },
|
|
|
-
|
|
|
//获取经纬度
|
|
|
// getLongLat() {
|
|
|
// return this.longlat
|
|
|
@@ -797,4 +196,4 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-</style>
|
|
|
+</style>
|