点击两个图标如何显示不同的街景?

Question

我想做的是有一个地图。那张地图显示了不同的图钉。它们表示不同的位置。此外，我有街景图标的所有位置，表明使用图钉。

代码如下:

<div class="comp-container-control">
<div *ngFor="let comp of compsData; let i = index">
<ng-container *ngTemplateOutlet="comparables; context:{compLoc: comp['location'], compView: comp['view'], compAddress: comp['address'], compIndex: i, complocInfo: comp['locationInfo'], viewLocationInfo : comp['viewLocationInfo']}"></ng-container>
</div>
<ng-template #comparables let-compLoc="compLoc" let-compView="compView" let-compAddress="compAddress" let-compIndex="compIndex" let-complocInfo="complocInfo" let-viewLocationInfo="viewLocationInfo">
<div class="wrapp-comp-border">
<div class="header-container">
<div class="header-heading">
<h3 class="control-first-heading">Comparable {{compIndex + 1}}</h3>
<h4 class="control-second-heading">{{compAddress}}</h4>
</div>
<div class="icon-container">
<img *ngIf = 'complocInfo.streetView' src="./assets/images/streetview.png" (click)="focusPropertyOnMap(complocInfo.lat, complocInfo.long, 'streetside')">
<img src="./assets/images/map.png" (click)="aerialView(complocInfo.lat, complocInfo.long)">
<img src="./assets/images/info.png" (click)="showDialog(viewLocationInfo , 'comp')">
</div>
</div>

TS

focusPropertyOnMap(lat, long, viewType) {
let geoinfo = [];
let geo = {'latitude': lat, 'longitude': long};
geoinfo['location'] = {'latitude': geo.latitude, 'longitude': geo.longitude};
this.showStreetVIew(geoinfo, viewType)
}
private showStreetVIew(e, viewType) {
let latitude = e.location.latitude;
let longitude = e.location.longitude;
let loc = new Microsoft.Maps.Location(latitude, longitude);
this.map.setView({
center: {latitude: loc.latitude, longitude: loc.longitude},
mapTypeId: Microsoft.Maps.MapTypeId[`${viewType}`],
zoom: 17
});
}

final out out<点击这里查看输出>

如果我点击其中一个街景图标它会执行focusPropertyOnMap()在这个函数中，我设置了showStreetVIew()函数，然后执行它并显示streetView

但问题是，如果我点击另一个街景图标，位置街景不会来。如果关闭街景，并再次点击街景图标，它的到来。你有什么想法或解决方案吗?

Answer 1

听起来像是竞争条件。我相信Streetside是在一个单独的画布上下文中呈现的，并且是异步完成的。这很可能是你的问题的原因。我可以用这个简单的代码块来重现:

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
/* No need to set credentials if already passed in URL */
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 18,
center: new Microsoft.Maps.Location(28.332823, -81.492279),
streetsideOptions: { onErrorLoading: onErrorLoading }
});
map.setView({ mapTypeId: Microsoft.Maps.MapTypeId.streetside });
map.setView({ mapTypeId: Microsoft.Maps.MapTypeId.streetside,
center: new Microsoft.Maps.Location(28.33, -81.492) });
function onErrorLoading(e) {
alert('here')
}

请注意，您可以包装一个错误处理选项来监视这种类型的问题，然后做一些事情来缓解它。

一个更简单的解决方案是，要么在进入街面时进行监控，忽略任何随后的点击进入，直到他们退出该模式，或者在进入/退出街面时隐藏/显示地图上的图层，以防止用户选择第二个选项。