Ionic 2：地圖標記不出現

Question

我試圖顯示地圖標記沒有用。

構造：

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」無法找到map_canvas。我如何在這種情況下做到這一點？

更新： 即使按照Will的建議並嘗試使用或不使用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); 
    } 

更新2： 在我的CSS，我添加以下代碼行引起我的標記不出現。

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

刪除它與Will的答案工程。

Answer 1

我沒有使用谷歌地圖這樣的離子2但是這是它看起來像你會錯了...

什麼，你正在做的是：

1. 獲取地理位置（異步）
2. 創建地圖和地理位置回調
3. 將其分配給this.map創建標記，並將其分配給var map;

這個問題的第一個問題是點2只有在點1的異步回調完成時纔會發生。此時第3步已經開火，因此您在技術上將標記添加到無。

第二個問題是您將標記設置爲與設置地圖不同的變量，因此無論如何都不會顯示標記。

你需要做的是：

1. 初始化的谷歌地圖
2. 讓你的異步地理位置通話
3. 設置你的地理位置回調的結果將地圖
4. 創建您的地圖標記，並設置它到this.map

這樣不管步驟3是否在ste之前運行第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!'}); 
}