В настоящее время я работаю над мобильным приложением ionic 4, мне нужно добавить карту для взаимодействия. Когда я запускаю приложение, загрузка работает нормально, но когда я хочу взаимодействовать с картой другими методами, кроме загрузки, моя переменная не определена.
В этой части вы увидите две службы, связанные с проблемой. Подводя итог, когда я запускаю приложение, я вызываю функцию loadMap(), а после этого вызываю метод addMarker().
Именно в этом методе моя карта переменных не определена, и я не понимаю, почему.
Это служба, которая вызывает метод addMarker().
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { getRandomString } from 'selenium-webdriver/safari';
import {Marker, MarkerOptions} from '@ionic-native/google-maps';
import {MapService} from './map.service';
const GlobalIcon = 'compass';
@Injectable({
providedIn: 'root'
})
export class IndiceService {
public indices: Array<{ title: string; note: any; icon: string, id: number, lat:number, lng:number }> = [];
constructor(private router: Router, private map : MapService) { }
ajouterIndice(passedNote:any){ //Faire cet ajout à l'aide d'une promesse ???
this.indices.push({
title : 'Indice ' + (this.indices.length+1),
note : passedNote,
icon : GlobalIcon,
id : this.indices.length+1,
lat: this.getRandomInt(45,75),
lng: this.getRandomInt(4,5),
});
this.map.addMarker(this.indices.length,this.indices[this.indices.length-1].note,this.indices[this.indices.length-1].lat,this.indices[this.indices.length-1].lng);
this.router.navigate(['/home']);
}
isIndiceIncluded(data :any) : boolean{
return this.indices.find(x => x.note === data) != undefined;
}
getRandomInt(min, max) : number {
return Math.random() * (max - min + 1) + min;
}
}
Этот сервис является моим картографическим сервисом
import { Injectable } from '@angular/core';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker,
Environment
} from '@ionic-native/google-maps';
@Injectable({
providedIn: 'root'
})
export class MapService {
private map: GoogleMap;
public markers : Array<Marker> = [];
constructor() { }
loadMap() {
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.783125,
lng: 2.809419
},
zoom: 18,
tilt: 30
}
};
this.map = GoogleMaps.create('map', mapOptions);
let marker: Marker = this.map.addMarkerSync({
title: 'Ionic',
icon: 'red',
animation: 'DROP',
position: {
lat: 45.783125,
lng: 4.809419
},
});
/*marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
alert('clicked');
});*/
}
addMarker(id : number ,note : any, lat:number, lng:number){
console.info(this.map); //write undefined
let currentMarker : Marker = this.map.addMarkerSync({
id : id,
title: note,
icon: 'red',
animation: 'DROP',
position: {
lat: lat,
lng: lng
},
});
this.markers.push(currentMarker);
}
}
Заранее спасибо за помощь и извините за мой уровень английского.
Да, этот метод доступен.
ваш this.map получает значение, когда выполняется loadmap(). Но когда вы пытаетесь использовать метод addmarker() напрямую, он покажет undefined
Вот почему я не понимаю, потому что loadmap() обязательно вызывается перед addMarker()...
добавить this.map = GoogleMaps.create('map', mapOptions); также внутри метода addmarker() и посмотрите, работает ли он
Он работает, но маркер не виден х)
добавьте это let mapOptions: GoogleMapOptions = { camera: { target: { lat: 43.783125, lng: 2.809419 }, zoom: 18, tilt: 30 } }; выше this.map в addmarker
Я сделал константу mapOptions внутри своего сервиса, интересно, отображается ли карта из карты загрузки...
Не могли бы вы попробовать загрузить карту в свой MapService после того, как платформа будет готова?
constructor(private platform: Platform) {
this.platform.ready().then(() => {
this.loadMap();
});
}
РЕДАКТИРОВАТЬ :
Это пример кода, который у меня работает;
import { AfterContentInit, Component, ViewChild } from '@angular/core';
declare var google;
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterContentInit {
@ViewChild('mapElement') mapElement;
map:any;
latitude: any = 22.454453;
longitude: any = 88.389610;
constructor() {}
ngAfterContentInit(): void {
const pos = { lat: this.latitude, lng: this.longitude };
this.map = new google.maps.Map(
this.mapElement.nativeElement, {
center: { lat: this.latitude, lng: this.longitude }, zoom: 17
});
this.map.setCenter(pos);
const marker = new google.maps.Marker({
position: pos, /* marker position */
map: this.map, /* map already created */
title: 'Hello World!'});
const contentString = '<div id = "content"><h1>Amitabh</h1><div id = "bodyContent"><p>Is a good person, I must select his answer and upvote him</p></div>';
const infowindow = new google.maps.InfoWindow({
content: contentString, maxWidth: 400 });
marker.addListener('click', function() {
infowindow.open(this.map, marker);
});
}
}
Надеюсь, это поможет. Снимок экрана с использованием ионная подача -col
Я попробую сейчас. Для получения дополнительной информации: когда я вызываю addMarker в home.page.ts, страница с картой div в html-части работает отлично. Но когда я вызываю addMarker в indiceService, который является элементом без HTML, карта «не определена», как будто она была свободной
Вау, это работает! Большое спасибо :D Я должен признать, что не знаю, почему это не работает раньше, потому что у меня нет платформы в моем map.service? Каково назначение этого элемента?
На самом деле моя проблема не решена :( Я обнаружил, что когда я вызываю loadMap() после первого вызова addMarker, он работает, но если я вызываю loadMap в конструкторе, у меня нет никаких неопределенностей, но маркеры будут невидимы:/
Основная проблема заключается во времени, ваши коды вызывались до того, как библиотека карт была загружена в память и готова к рендерингу. Я просто отложил loadMap, пока платформа не будет готова. Я уверен, что если вы правильно изучите свои коды и правильно упорядочите их, это сработает. Мне нужно сделать доставку, и, возможно, я попытаюсь подготовить пример кода для вашего ознакомления позже в тот же день (: p не задерживайте дыхание, пожалуйста)
Вы лучшие :D Буду искать дальше, спасибо за помощь!
Я думаю, что моя основная проблема иногда зависит от того, где я вызвал MapService. Я получил это сообщение «Ошибка: не пойманный (в обещании): ошибка: не удается найти элемент [#map]»
Я обновил ответ примером кода, он в основном инициализирует карту в Афтерконтентинит ( ngAfterContentInit() ). После загрузки карты я создаю InfoWindow для отображения информации, а затем, наконец, добавляю маркер и его событие щелчка (для отображения InfoWindow). Вы можете настроить этот значок, используя атрибут png (с относительным путем к пользовательскому изображению маркера), если это необходимо. Если вы заметили, я вызвал различные функции в последовательности, которая является ключом к запуску и отображению карты и ее элементов. Надеюсь это поможет.
Спасибо большое за вашу помощь ! Я голосую за ваш пост прямо сейчас!
когда вы вводите this.map. показывает ли он имя метода addmarker?