地图公共组件优化,增加点击查询结果后改变定位信息的功能
This commit is contained in:
parent
2cfce6d4a1
commit
24459b6be1
@ -12,9 +12,10 @@
|
||||
class="search-container"
|
||||
v-if="!isReadonly">
|
||||
<div class="search-input">
|
||||
<el-input @keydown.enter="handleSearch"
|
||||
<el-input
|
||||
@keydown.enter="handleSearch"
|
||||
v-model="searchAddress"
|
||||
placeholder="请输入地址"></el-input>
|
||||
placeholder="请输入地址进行查询"></el-input>
|
||||
<el-button
|
||||
style="margin-left: 8px"
|
||||
plain
|
||||
@ -204,6 +205,12 @@ export default {
|
||||
pageSize: 20, // 单页显示结果条数
|
||||
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||
});
|
||||
this.placeSearch.on('selectChanged', (target) => {
|
||||
let { selected } = target;
|
||||
let { address, location } = selected.data;
|
||||
this.coordinates = [location.lng, location.lat];
|
||||
this.form.address = address;
|
||||
});
|
||||
|
||||
//有定位时不获取默认定位和当前位置
|
||||
if (this.currentPosition && this.currentPosition.coordinates.length > 0) {
|
||||
@ -216,6 +223,7 @@ export default {
|
||||
lat: lat,
|
||||
},
|
||||
});
|
||||
this.coordinates = [lng, lat];
|
||||
this.form.address = this.address;
|
||||
/*this.coordinateToAddress(this.currentPosition.coordinates);*/
|
||||
}
|
||||
@ -224,6 +232,10 @@ export default {
|
||||
handleConfirm() {
|
||||
this.$refs.form.validate().then((valid) => {
|
||||
if (valid) {
|
||||
if (!this.coordinates) {
|
||||
this.$message.error('请在地图上确定您的目标地点');
|
||||
return;
|
||||
}
|
||||
let geometry = { type: 'Point', coordinates: this.coordinates };
|
||||
this.$emit('getAddress', geometry, this.form.address);
|
||||
this.close();
|
||||
@ -282,9 +294,9 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
renderMarker(marker) {
|
||||
renderMarker(pois) {
|
||||
this.clearMarker(); // 清除之前的标记
|
||||
let location = marker.location;
|
||||
let location = pois.location;
|
||||
this.map.setCenter([location.lng, location.lat]);
|
||||
// 移动地图视野到标记位置
|
||||
// this.map.setZoomAndCenter(16, [location.lng, location.lat]);
|
||||
@ -294,13 +306,14 @@ export default {
|
||||
position: [location.lng, location.lat],
|
||||
map: this.map,
|
||||
});
|
||||
|
||||
// 创建信息窗口
|
||||
let infoWindowContent = `<div style="width: 200px">`;
|
||||
if (marker.name) {
|
||||
infoWindowContent += `<h3>${marker.name}</h3>`;
|
||||
if (pois.name) {
|
||||
infoWindowContent += `<h3>${pois.name}</h3>`;
|
||||
}
|
||||
if (marker.address) {
|
||||
infoWindowContent += `<p>地址:${marker.address}</p>`;
|
||||
if (pois.address) {
|
||||
infoWindowContent += `<p>地址:${pois.address}</p>`;
|
||||
}
|
||||
infoWindowContent += '</div>';
|
||||
let infoWindow = new AMap.InfoWindow({
|
||||
@ -315,8 +328,13 @@ export default {
|
||||
);
|
||||
});
|
||||
this.searchPanelVisible = false;
|
||||
if (marker.address) {
|
||||
this.form.address = marker.address;
|
||||
this.marker.on('click', () => {
|
||||
if (pois.address) {
|
||||
this.form.address = pois.address;
|
||||
}
|
||||
});
|
||||
if (pois.address) {
|
||||
this.form.address = pois.address;
|
||||
}
|
||||
},
|
||||
close() {
|
||||
@ -367,8 +385,9 @@ export default {
|
||||
}
|
||||
});
|
||||
} else {
|
||||
//因为权限或其他原因导致无法自动获取定位,不抛出异常,由用户手动选择地址即可
|
||||
console.error(result);
|
||||
reject(result);
|
||||
/* reject(result);*/
|
||||
/* this.$emit('error', '无法获取定位信息:' + result.message);*/
|
||||
}
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user