我在 Angular 6 项目中使用这个框架:
这是我使用 Angular 的第一个项目,所以我仍然在弄清楚它在某些时候是如何工作的。 我的项目现在的状态如下: 我可以加载以特定位置为中心的 map 。它还会加载标记并在缩小时将它们聚类。在侧边菜单中列出所有标记项并显示有关位置的一些信息。我还实现了一些用户交互:将鼠标悬停在侧边菜单中的标记或列表项上会突出显示列表/ map 中的相应项目。单击标记或列表项时,侧边菜单中还会显示一些详细信息。到目前为止一切顺利。
现在我想提取位于 map 当前边界内的所有标记,以缩短侧边菜单中的列表。 在组件的模板中,我使用的 map 如下(我提取了使用 map 的部分):
[...]
<!-- Map Section -->
<div class="main-data-container content-box">
<div class="split-view-container" #parentData>
<app-spinner *ngIf="!allItems"></app-spinner>
<agm-map [style.height.px]="parentData.offsetHeight"
[latitude]="mapCenter.lat"
[longitude]="mapCenter.lon"
[zoom]="mapZoom"
#agmMap>
<agm-marker-cluster [styles]="[companyStyle]">
<agm-marker
*ngFor="let companyLocation of companyLocations"
(markerClick)="clickedMarker(companyLocation)"
(mouseOver)="hoverOverMarker(companyLocation)"
(mouseOut)="hoverOutMarker(companyLocation)"
[latitude]="companyLocation.latitude"
[longitude]="companyLocation.longitude"
[iconUrl]="{url: setIcon(companyLocation), scaledSize: {width: 55, height: 82.5}}">
</agm-marker>
</agm-marker-cluster>
</agm-map>
</div>
[...]
companyLocations
:typescript 文档中的数组,其中包含有关公司多个位置的信息。
#agmMap
:通过这个,我将 html 元素绑定(bind)到 typescript 文件中的对象。
现在我正在努力的 Typescript 部分:
[...]
@ViewChild('agmMap') agmMap: any;
companyLocations: Array<CompanyLocation>;
filteredCompanyLocations: Array<CompanyLocation>;
[...]
checkMarkersInBounds() {
// Initialize Filtered Arrays as empty Arrays
this.filteredCompanyLocations = [];
// Run through all CompanyLocations
for(let company of this.companyLocations){
//write coordinates from companyLocation into LatLng Object
let loc: LatLngLiteral = {lat: company.latitude, lng: company.longitude};
//Check if the Location is in Bounds of the Map
if (this.agmMap.getBounds().contains(loc)){
//If it's in Bounds add it to the filtered Array
this.filteredCompanyLocations.push(company);
}
}
}
[...]
我在 .getBounds()
上遇到错误:
TypeError: this.agmMap.getBounds is not a function.
当尝试用 this.agmMap._mapsWrapper.getBounds().contains(loc)
切换 this.agmMap.getBounds().contains(loc)
时抛出:
TypeError: this.agmMap._mapsWrapper.getBounds(...).contains is not a function.
我已经在这里和其他地方尝试了几种不同但相似的意图的解决方案,并将其适应我的应用程序:
- https://github.com/allenhwkim/angularjs-google-maps/issues/762
- https://github.com/SebastianM/angular-google-maps/issues/696
- Angular 5 google maps : show only markers in radius of # kilometers
- How can I check the marker is or isn't in the bounds using google maps v3
我希望有人能提供一些提示甚至解决方案。几天以来我一直在为此苦苦挣扎。也许我只是对解决这个问题视而不见,而我忽略了一些重要的事情......
最佳答案
我找到了解决这个问题的方法。
在模板中,将事件输出添加到 map 的 (boundsChange)
输出。这会返回 map 的边界,并且在边界发生变化时也会触发(很明显):
[...]
<agm-map
[style.height.px]="parentData.offsetHeight"
[latitude]="mapCenter.lat"
[longitude]="mapCenter.lon"
[zoom]="mapZoom"
(boundsChange)="checkMarkersInBounds($event)">
[...]
在 TS 文件中,我实现了 checkMarkersInBounds(bounds)
方法,如下所示:
checkMarkersInBounds(bounds) {
this.filteredItems = [];
for(let company of this.companyLocations){
let companyPosition = {lat: company.latitude, lng: company.longitude};
if (bounds.contains(companyPosition)){
//Put the item in an Array which can be shown in the List
}
}
}
关于Angular Google Maps 获取 map 边界内的所有位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52480161/