Я создаю приложение Angular 6 с интеграцией Google Javascript API с использованием ГОСА. Карта работает, за исключением динамического добавления маркеров с помощью http get.
Это component.html:
<agm-map [latitude] = "51.017467" [longitude] = "10.233982">
<agm-marker *ngFor = "let position of positions" [latitude] = "position.latitude"
[longitude] = "position.longitude"></agm-marker>
</agm-map>
И component.ts:
export class EventsListComponent {
public positions = [new Position(51.017467, 10.233982)]; // static point for debug
constructor(public http: HttpClient) {
let eventIds: string[] = ['5bffbac5596a7de59190dfbb']; // also for debug
for (let eventId of eventIds) {
this.http.get<Address>("api/v1/Events/Get/" + eventId +"/GetVenue/GetAddress").subscribe(result => {
console.info(result);
this.addresses.push(result);
});
}
}
export class Address {
constructor(
public latitude: number,
public longitude: number,
public addressLine: string,
public city: string,
public state: string,
public country: string,
public zip) {
}
}
Это выводится на консоль:
{
"addressLine":"Gartenstraße 7",
"city":"Eschwege",
"country":"Germany",
"zip":"37269",
"state":"Hessen",
"latitude":"51.1821073",
"longitude":"10.0572713"
}
Дает следующий результат:
Маркер отображается в DOM, но не на карте (маркер, который вы видите, является статическим, их должно быть два).
Добавление маркеров динамически работает с такими нажатиями кнопок:
<button (click) = "btnClick()" class = "btn btn-primary"></button>
А потом в component.ts:
btnClick() {
this.addresses.push(new Address(51.1821073, 10.0572713,"","","","",""));
}
Дает следующий результат:
Маркер появляется в DOM и на карте.
Помещаем HTTP-запрос на получение в метод, вызываемый нажатием кнопки, следующим образом:
btnClick() {
this.http.get<Address>("api/v1/Events/Get/" + eventId +"/GetVenue/GetAddress").subscribe(result => {
console.info(result);
this.addresses.push(result);
});
}
Он по-прежнему добавляет только маркер к дому, а не на карту.
Любые идеи?





Я думаю, вы передаете lat / lng в виде строки (как обозначено "" в журнале консоли), когда используете вызов службы, но вы передаете его как число, когда добавляете его вручную. Попробуй сделать что-нибудь вроде этого
this.addresses.push({
addressLine: result.addressLine,
city: result.city,
country: result.country,
zip: result.zip,
state: result.state,
latitude: +result.latitude,
longitude: +result.longitude
});
или вы можете попытаться сократить его до чего-то вроде этого
result.latitude = +result.latitude;
result.longitude = +result.longitude;
this.addresses.push(result);
Интересная часть, исходящая из фона C# / java (строго типизированного), заключается в том, что в классе Address и широта, и долгота имеют тип number. Это означает, что они также должны быть числом при ссылке в html-файле ...
рад слышать, что ты понял это
Хахаха, я работал над этим около 5 часов и решил это всего за 2 минуты до того, как вы разместили это. Я осознал проблему, когда распечатал статическую точку рядом с точкой из запроса на получение и увидел разные типы данных. Теперь все работает :)