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，但它没有出现 too.Even 将整个标记函数放在内部函数中也不起作用。

我猜这可能与我的 "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 中使用过 Google 这样的地图，但这就是您出错的地方...

您正在做的是：

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

第一个问题是点 2 仅在点 1 的异步回调完成时发生。此时第 3 步已经触发，因此从技术上讲，您没有添加标记。

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

您需要做的是：

初始化 Google 地图
进行异步地理定位调用
将您的地理位置回调结果设置为地图居中
创建地图标记并将其设置为 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!'});
 }

Ionic 2：地图标记未出现

Ionic 2: Map markers not appearing

javascript

google-maps

google-maps-api-3

ionic-framework

ionic2