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

update:更新优化地图组件

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