离子原生谷歌地图标记问题答案

【问题标题】：Ionic native google maps marker issues离子原生谷歌地图标记问题
【发布时间】：2018-05-24 22:44:27
【问题描述】：

我正在构建一个 ionic 3 应用程序并尝试使 htmlInfoWIndow 显示在地图上，但没有任何运气。我正在使用以下版本： "@ionic-native/google-maps": "4.4.2", "cordova-plugin-googlemaps": "^2.1.1",

loadMap() {
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = GoogleMaps.create('map', mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');

        let htmlInfoWindow = new HtmlInfoWindow();

        let html = [
          '<h2>Title here....</h2>'
        ].join("");
        htmlInfoWindow.setContent(html);

        // Now you can use all methods safely.
        this.map.addMarker({
          position: {
            lat: 43.0741904,
            lng: -89.3809802
          }
        })
          .then((marker: Marker) => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {
                htmlInfoWindow.open(marker);
                console.log('sad');
              });
          });


      });
  }

loadMap() 函数在 ionicviewenter 上初始化。控制台日志被打印出来，但在标记点击时没有出现任何信息窗口。

任何想法我做错了什么？谢谢，三重奏

【问题讨论】：

使用ionViewDidLoad() 而不是ionicViewEnter()
发现问题，添加了标记 div 但由于某种原因可见性：隐藏属性未更改为可见性：可见。手动完成后一切正常。

标签： angular google-maps cordova google-maps-markers ionic3

【解决方案1】：

检查（转至 diapositive 42）

https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000

【讨论】：

是的，这就是我首先尝试的，但是 htmlinfowindow 上的可见性没有改变，所以我在 css 中强制它。现在好了。