将map div放在ion-content指令内时，绘图工具无法正常工作

Question

我们正在将由本地语言编写的应用程序迁移到诸如ionic的跨平台技术。看到开发应用程序非常快。应用程序中有一个地图页面，它是由OpenLayers最新版本编写的。除绘图工具外，它工作正常。绘制的点与鼠标单击的位置不匹配。该问题是由于将map div放置在ion-content指令内并试图覆盖某些CSS而没有成功而引起的。我们将通过从内容中删除地图div来解决该问题，并使用jQuery计算地图div的高度，以获取页眉和页脚之间的完整高度。但是，最好是可以在内容内部使用map div。如果有人对此有所提示，我们将不胜感激。非常感谢！

<ion-header>

  <ion-navbar>
    <ion-title>Map</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>  
  <div id="map" style="height: 100%; width: 100%;" data-tap-disabled="true"></div>
</ion-content>


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

declare var ol: any;

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MapPage');        
    this.loadMap();
  }

  loadMap() {
    console.log('Load Map');
    var raster = new ol.layer.Tile({
      source: new ol.source.OSM()
    });

    var source = new ol.source.Vector();
    var vector = new ol.layer.Vector({
      source: source,
      style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
          color: '#ffcc33',
          width: 2
        }),
        image: new ol.style.Circle({
          radius: 7,
          fill: new ol.style.Fill({
            color: '#ffcc33'
          })
        })
      })
    });

    var map = new ol.Map({
      layers: [raster, vector],
      target: 'map',
      view: new ol.View({
        center: [-11000000, 4600000],
        zoom: 4
      })
    });

    var modify = new ol.interaction.Modify({source: source});
    map.addInteraction(modify);

    var draw, snap; // global so we can remove them later    

    function addInteractions() {
      draw = new ol.interaction.Draw({
        source: source,
        type: 'Polygon'
      });
      map.addInteraction(draw);
      snap = new ol.interaction.Snap({source: source});
      map.addInteraction(snap);      
    }   

    addInteractions();
  } 

}