不同頁面的不同Google地圖位置

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;

演示

確保您使用了 api密鑰，因為我已在app.module.ts中刪除了我的

Answer 2

所以我在一些外部幫助下找到了答案。

我設置了（coffee.place.lat）和（coffee.place.lng）來代替硬編碼的坐標，這使我可以使用從.ts文件派生的已定義對象“ place”（咖啡）。

因此，place對象在coffee-list.ts文件中看起來像這樣：

{name：Nescafe，place：{lat：59.326242，lng：59.326242}} //這是一種咖啡類型