加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

在Angular Google Map中应该有多个时只显示一个标记

发布时间:2020-12-17 17:10:21 所属栏目:安全 来源:网络整理
导读:我从 https://angular-maps.com开始使用Angular Google Map.我想在agm-marker元素上使用ngFor指令显示多个标记.虽然DOM显示所有标记都存在,但UI仅显示地图上的第一个标记. 这是HTML部分: agm-map [latitude]="lat" [longitude]="long" [zoom] = 16agm-marke
我从 https://angular-maps.com开始使用Angular Google Map.我想在agm-marker元素上使用ngFor指令显示多个标记.虽然DOM显示所有标记都存在,但UI仅显示地图上的第一个标记.

这是HTML部分:

<agm-map [latitude]="lat" [longitude]="long" [zoom] = 16>
<agm-marker *ngFor="let m of latlongs; let i = index"
[latitude]="m.lat"
[longitude]="m.long"
[markerDraggable]="m.draggable"></agm-marker>

</agm-map>

打字稿代码在这里:

this.service.getData().subscribe(data => {
  let json: any[] = []; 
  json["data"] = data.json().map(it => {
    it["category"] = "location";
    it["gallery"] = ["../assets/img/area.png"];
    return it;
  });

  for(let i = 0; i < json["data"].length; i++){
    this.mapInfos.push({lat: +json["data"][i].lat,long: +json["data"][i].long});
  }

  this.latlongs = this.mapInfos;

});

我正在为我的项目使用角度4

解决方法

我建议你按照这个链接 https://www.npmjs.com/package/@agm/js-marker-clusterer.

然后在此代码部分中附加for循环:

<agm-marker [latitude]="51.673858" [longitude]="7.815982"></agm-marker>

latitude] =“51.673858”[经度] =“7.815982”>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读