提交 1ed7b056 编写于 作者: Shine-zwj's avatar Shine-zwj

update:更新优化地图组件

上级 6824ac63
......@@ -124,6 +124,14 @@ export default class AppMobMapPage extends Vue {
*/
public win: any;
/**
* 搜索服务
*
* @type {*}
* @memberof AppMobMapPage
*/
public placeSearch: any;
/**
* 地图配置
*
......@@ -156,19 +164,19 @@ export default class AppMobMapPage extends Vue {
* @memberof AppMobMapPage
*/
initCurAddress(o: any) {
if (!this.marker.visible) {
if (this.address) {
this.handleSearch();
} else {
o.getCurrentPosition((status: any, result: any) => {
if (result && result.status != 0) {
const position = [result.position.lng, result.position.lat];
this.address = result.formattedAddress;
Object.assign(this.marker, { position: position, address: this.address, visible: true });
o.getCurrentPosition((status: any, result: any) => {
if (result && result.status != 0) {
if (!this.marker.visible) {
if (this.address) {
this.handleSearch();
} else {
const position = [result.position.lng, result.position.lat];
this.address = result.formattedAddress;
Object.assign(this.marker, { position: position, address: this.address, visible: true });
}
});
}
}
}
}
});
}
/**
......@@ -185,6 +193,20 @@ export default class AppMobMapPage extends Vue {
extensions: "all",
})
});
// 注册地图搜索服务
amap.service(["AMap.PlaceSearch"], () => {
this.placeSearch = new this.win.AMap.PlaceSearch({
pageSize: 5, // 单页显示结果条数
citylimit: false, // 是否强制限制在设置的城市内搜索
panel: 'map__result', // 搜索列表的HTML容器id或容器元素
});
})
// 监听搜索列表点击
amap.event.addListener(this.placeSearch,"listElementClick", (e: any) => {
if(e.data.location) {
this.handleMarker(e.data.location.R, e.data.location.Q, this, false);
}
});
if(this.viewparams) {
this.initAddress();
}
......@@ -216,11 +238,11 @@ export default class AppMobMapPage extends Vue {
const longitude = viewparams.longitude;
const latitude = viewparams.latitude;
if(longitude && latitude) {
const position = [longitude, latitude];
const position = [Number(longitude), Number(latitude)];
Object.assign(this.marker, {
position: position,
address: this.address,
visible: true
visible: true,
});
if (!this.address) {
const address = await this.getAddress(longitude, latitude).catch((error) => {
......@@ -230,7 +252,7 @@ export default class AppMobMapPage extends Vue {
this.address = address as string;
}
}
}
}
}
/**
......@@ -254,13 +276,11 @@ export default class AppMobMapPage extends Vue {
* @memberof AppMobMapPage
*/
public clearSearchList() {
let el = document.getElementById('map__result');
let childs = el?.childNodes;
if (childs && childs.length > 0) {
for (let i=0; i< childs?.length; i++) {
el?.removeChild(childs[i]);
}
if (this.placeSearch) {
this.placeSearch.clear();
}
this.address = "";
Object.assign(this.marker, { position: [0, 0], address: this.address, visible: false });
}
/**
......@@ -269,29 +289,16 @@ export default class AppMobMapPage extends Vue {
* @memberof AppMapPosition
*/
public handleSearch() {
const that = this;
let placeSearch: any;
// 调用服务搜索结果
that.win.AMap.service(["AMap.PlaceSearch"], () => {
placeSearch = new this.win.AMap.PlaceSearch({
pageSize: 5,
citylimit: false,
panel: 'map__result',
})
placeSearch.search(that.address, (status: any, result: any) => {
if (status == 'complete' && result.info == 'OK') {
if(result.poiList.pois) {
that.handleMarker(result.poiList.pois[0].location.R, result.poiList.pois[0].location.Q, that, false);
}
}
})
})
// 监听搜索结果列表点击事件
that.win.AMap.event.addListener(placeSearch,"listElementClick", (e: any) => {
if(e.data.location) {
that.handleMarker(e.data.location.R, e.data.location.Q, that, false);
if (this.placeSearch) {
this.placeSearch.search(this.address, (status: any, result: any) => {
if (status == 'complete' && result.info == 'OK') {
console.warn('搜索成功');
} else {
console.warn('搜索失败');
}
})
})
}
}
......@@ -360,9 +367,9 @@ export default class AppMobMapPage extends Vue {
*/
public onOK() {
const data ={
address: this.address,
longitude: this.marker.position[0],
latitude: this.marker.position[1],
address: this.marker.address,
longitude: this.marker.position[0] ? this.marker.position[0].toFixed(6) : null,
latitude: this.marker.position[1] ? this.marker.position[1].toFixed(6) : null,
}
if (this.close && this.close instanceof Function) {
this.close(data);
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册