#angular #google-maps #ionic4
#angular #google-карты #ionic4
Вопрос:
У меня есть ионное приложение, использующее полилинию Google Maps для получения широты и долготы из API data json для маршрута полета. я хочу выполнить автоматическую перезагрузку данных, чтобы увидеть текущие данные на карте. я добавил установленный интервал для перезагрузки данных. Данные перезагружаются и выводятся на консоль, но у меня ошибка ниже, и на карте не отображаются текущие данные.
ERROR Error: Uncaught (in promise): Error: Can not find the element [#map_canvas]
Error: Can not find the element [#map_canvas]
at vendor.js:76400
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2781)
at Object.onInvokeTask (vendor.js:51333)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2780)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2553)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (polyfills.js:2856)
at ZoneTask.invoke (polyfills.js:2845)
at timer (polyfills.js:4639)
at resolvePromise (polyfills.js:3189)
at resolvePromise (polyfills.js:3146)
at polyfills.js:3250
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2781)
at Object.onInvokeTask (vendor.js:51333)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2780)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2553)
at drainMicroTaskQueue (polyfills.js:2959)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (polyfills.js:2860)
at ZoneTask.invoke (polyfills.js:2845)
мой код
ngOnInit() {
this.platform.ready();
this.getmarker();
setInterval(()=> {
this.getmarker()
},4000);
}
async getmarker() {
this.http.get('xxxxxxx.json?flightId=4232343, {}, {})
.then(data => {
for (let datas of JSON.parse(data.data).result.response.data.flight['track']) {
this.points.push({ lng: datas.longitude, lat: datas.latitude });
}
let AIR_PORTS = this.points;
console.log(AIR_PORTS)
this.map = GoogleMaps.create('map_canvas', {
camera: {
target: AIR_PORTS
}
});
let polyline: Polyline = this.map.addPolylineSync({
points: AIR_PORTS,
color: '#AA00FF',
width: 5,
geodesic: true,
clickable: true,
});
let points: Array<ILatLng> = this.points = []
})
}
HTML
<div style="height: 100%;width: 100%" id="map_canvas"></div>
Комментарии:
1. Вы делаете это в модальном режиме? В соответствии с (этим) [ github.com/ionic-team/ionic-native-google-maps/issues/172 ] , это не работает на модальном.
2. Попробуйте удалить цвет фона для ионного содержимого, это работает для меня.
Ответ №1:
Можете ли вы показать весь html? пожалуйста, убедитесь, что родительский элемент имеет некоторую высоту. CSS всегда обрабатывает процентные значения как процент от родительского элемента.
Часто эта проблема вызвана выделением высоты 0 пикселей. Подумайте об этом таким образом: при инициализации div карты был пустым, родительский элемент имел бы высоту 0 пикселей. Когда мы позже заполним содержимое карты, мы ничего не увидим, потому что высота 100% родительского 0px равна 0px.
<ion-content>
<ion-card style="height: 50%">
<div style="height: 100%;width: 100%" id="map_canvas"></div>
</ion-card>
</ion-content>
Убедитесь, что родительский элемент (т.Е. ion-card в приведенном выше примере) имеет некоторую высоту при инициализации. Вы можете установить фиксированную высоту для тестирования, и это докажет мою точку зрения.
<div style="height: 200px;" id="map_canvas"></div>
Удачи.