Javascript 离子2：地图标记不出现

我试图显示一个地图标记，但没有结果

建造商：

 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索引设置为1，但它没有出现。即使将整个marker函数放在内部函数中也不起作用

我猜这可能与我的“VarMap”无法定位map_画布有关。在这种情况下我该怎么做

更新： 即使遵循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%;
}

---

用威尔的答案删除它是可行的。

我在《爱奥尼亚2》中没有像这样使用谷歌地图，但这看起来是你出错的地方

您正在做的是：

获取地理位置（异步）

在地理位置回调中创建地图并将其分配给

this.map

创建标记并将其分配给

var映射

第一个问题是，只有当点1的异步回调完成时，才会发生点2。此时，步骤3已经启动，因此从技术上讲，您是在不添加标记

第二个问题是，将标记设置为与将贴图设置为不同的变量，这样它就不会显示标记

您需要做的是：

初始化谷歌地图

进行异步地理定位调用

设置地理位置回调结果以使地图居中

创建地图标记并将其设置为

this.map

这样，无论步骤3是否在步骤4之前运行（由于异步地理定位调用），您的地图都已初始化，标记将出现

因此，您的代码应该更像这样（可能不完全正确，但操作顺序应该正确）

---

为什么要在

getCurrentPosition

函数的回调中初始化映射？因为这是异步的，所以在创建地图之后，地图将被初始化marker@Will.Harris更新！我的意思是你在回调中初始化你的地图，就像这样

this.map=new google.maps.map（document.getElementById（“map_canvas”），选项）。但是您的标记代码不在回调中，因此您的标记代码正在将其设置为
map\u canvas
，但是
map\u canvas
此时尚未初始化！这有意义吗？在调用
Geolocation.getCurrentPosition（）
谢谢！即使在这之后，标记仍然没有出现。我试过使用5秒的setInterval函数也不起作用。好吧，我还没有研究过这个问题，所以不确定这是编码问题还是离子2和谷歌地图的已知问题。你能试着在这里复制你的代码，并把它添加到你的问题中，这样就更容易看出什么是错误的吗？我只是快速看了一下，这可能是一个编码问题。我将更新我的答案，向您展示如何向地图添加标记，正如Google Hi所记录的，我的项目布局与此类似->。即使以他为榜样也行不通。非常感谢你的帮助！我已经在我的本地项目中使用Ionic 2 beta 6对此进行了测试，它确实有效。您正在设置的标记是否与
navigator.geolocation.getCurrentPosition
的位置相同？因为我开始尝试拖动地图时会出错。因此，如果您拖动地图查找标记，这些错误可能会停止标记加载。只是猜测
 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!'});
 }