Ионные 2: Маркер карты не отображается

Question

Я пытаюсь отобразить маркер карты безрезультатно.

Constructor:

constructor(navController, platform, app) { 
    this.navController = navController; 
    this.platform = platform; 
    this.app = app; 

    platform.ready().then(() => { 
    this.initializeMap(); 
    }); 
    } 

Логика:

initializeMap() { 

    Geolocation.getCurrentPosition().then((resp) => { 
     console.log("Lat: ", resp.coords.latitude); 
     console.log("Long: ", resp.coords.longitude); 
    }); 

    let locationOptions = {timeout: 30000, enableHighAccuracy: true}; 
    navigator.geolocation.getCurrentPosition(

     (position) => { 

     let options = { 
      // /new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      disableDefaultUI: true, 
      setMyLocationEnabled: true 
     } 

     this.map = new google.maps.Map(document.getElementById("map_canvas"), options); 

     }, 

     (error) => { 
     console.log(error); 
     }, locationOptions 
    ); 

    var myLatLng = new google.maps.LatLng(1.290270,103.851959); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     title: 'Hello World!', 
    }); 
    var map = google.maps.Map(document.getElementById("map_canvas")); 
    marker.setMap(map); 

    } 

Все отлично просто карта маркер не отображается работает.

Я попытался создать новый экземпляр карты и установить z-index другой карты в 1, но он тоже не появляется. Даже если все функции маркера внутри внутренней функции тоже не работают.

Я предполагаю, что это может иметь отношение к моей карте «var», неспособной найти map_canvas. Как это сделать в этом случае?

Обновление: Даже после того, как предложение Уилла и попытка с или без setInterval, маркер тоже не отображается.

var myVar = setTimeout(myFunction, 5000); 
    function myFunction(){ 
    var myLatLng = new google.maps.LatLng(1.290270,103.851959); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     title: 'Hello World!', 
    }); 

    console.log("poof"); 
    marker.setMap(this.map); 
    } 

Update 2: В моем CSS, я добавил следующие строки кода, которые вызывают мои маркеры не появляются.

div{ 
    max-width:100%; 
max-height:100%; 
} 

Снятие его с ответа Уилла.

Answer 1

Я не использовал Google Map, как это в ионическом 2, но это, где это выглядит, как вы собираетесь неправильно ...

Что вы делаете:

1. Получение геолокации (асинхронно)
2. Создание карты и назначение его this.map в геолокации обратного вызова
3. Создание маркера и назначения его var map;

Первая проблема с этим - это точка 2, только когда завершен асинхронный обратный вызов точки 1. В этот момент шаг 3 уже запущен, так что вы технически добавляете маркер в ничто.

Вторая проблема заключается в том, что вы устанавливаете маркер в другую переменную, чем та, на которую вы устанавливаете карту, чтобы она не отображала маркер в любом случае.

Что вам нужно сделать, это:

1. Инициализировать карту Google
2. Сделайте свой асинхронный геолокации вызов
3. Установите результат геолокации обратного вызова, чтобы центрировать карту
4. Создать маркер карты и установить до this.map

Этот способ, независимо от того, проходит ли этап 3 до того, p 4 (из-за асинхронного вызова геолокации) ваша карта уже инициализирована и появится маркер.

Так что ваш код должен выглядеть следующим образом (может быть не совсем корректно, но порядок ведения дел должно быть справа) ...

initializeMap() { 
    Geolocation.getCurrentPosition().then((resp) => {}); 

    //initialise map 
    let options = { 
    zoom: 16, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    disableDefaultUI: true, 
    setMyLocationEnabled: true 
    }  
    this.map = new google.maps.Map(document.getElementById("map_canvas"), options); 

    //get geolocation and set center 
    let locationOptions = { timeout: 30000, enableHighAccuracy: true };  
    navigator.geolocation.getCurrentPosition((position) => { 
    //setCenter should be a method to let you dynamically change the center of the map 
    this.map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); 
    }, (error) => {}, locationOptions); 

    //create marker and set to initialised map 
    var myLatLng = new google.maps.LatLng(1.290270, 103.851959); 
    var marker = new google.maps.Marker({ position: myLatLng, map: this.map, title: 'Hello World!'}); 
}