Question

因此，我得到了一个有关不同咖啡的简单网站，现在每种咖啡类型一旦单击，都有其自己的页面。我希望每个页面在Google地图上显示其唯一位置，这意味着多个LatLng坐标。

我目前所有页面的位置都相同...

我正在使用Angular 6，并且正在使用npm（节点程序包管理器）中的AGM（Angular Google Maps）程序包。

这是我的coffee-detail.html中的硬编码数据的摘要：

给我看看

<agm-map [latitude]="59.326242" [longitude]="17.8419719">
   <agm-marker [latitude]="59.326242" [longitude]="17.8419719"></agm-marker>
   <agm-info-window>place</agm-info-window>
</agm-map>

Answer 1

您需要创建一个可重用的组件，将其放置在此处，并在每次坐标为@Inputs()时传递。然后，您将用作<reusable-compoennt [lat]='your-lat' [lon]='your-lon'></reusable-component>

map.component.ts

<agm-map [latitude]="lat" [longitude]="lon">
    <agm-marker [latitude]="lat" [longitude]="lon"></agm-marker>
        <agm-info-window>place</agm-info-window>
</agm-map>

export class MapComponent  {
  @Input() lat: string;
  @Input() lon: string;
}

然后像在app.component.html中一样使用它：

<map [lat]="lat1" [lon]="lon1"></map>

<hr>

<map [lat]="lat2" [lon]="lon2"></map>

app.component.ts：

lat1: number = 51.678418;
lon1: number = 7.809007;

lat2: number = 59.326242;
lon2: number = 17.8419719;

Demo

确保您使用您的 API密钥，因为我已删除了app.module.ts中的我的

Answer 2

所以我在一些外部帮助下解决了这个问题。

在硬编码坐标的位置，我设置了一个（coffee.place.lat）和一个（coffee.place.lng）这使我可以使用从.ts文件获取的已定义对象“ place”（咖啡）。

所以place对象在coffee-list.ts文件中看起来像这样：

{名称：雀巢，地点：{lat：59.326242，lng：59.326242}} //这将是一种咖啡类型

不同页面的不同Google地图位置

2 个答案: