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

我没有在 Ionic 2 中使用过这样的谷歌地图，但看起来你错了......

你正在做的是：

1. 获取地理位置（异步）
2. 创建地图并将其分配给地理定位回调中的this.map
3. 创建标记并将其分配给var map;

第一个问题是第 2 点仅在第 1 点的异步回调完成时发生。此时第 3 步已经触发，所以从技术上讲，您将标记添加到任何内容中。

第二个问题是您将标记设置为与地图设置不同的变量，因此无论如何它都不会显示标记。

你需要做的是：

1. 初始化 Google 地图
2. 进行异步地理定位调用
3. 将您的地理位置回调结果设置为地图居中
4. 创建地图标记并将其设置为this.map

这样，无论第 3 步是否在第 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!'});
 }