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中使用过这样的谷歌地图，但这就是你出错的地方......

你在做的是：

获取地理位置（异步）
创建地图并将其分配给地理定位回调中的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!'});
 }

离子2：没有出现地图标记

1 个答案: