Инструмент рисования не работает должным образом при помещении карты div в директиву ion-content

Question

Мы находимся на пути к переносу приложения, написанного на родных языках, на кроссплатформенную технологию, такую ​​как ionic.Видя, что приложение очень быстро разрабатывается.В приложении есть страница карты, написанная последней версией OpenLayers.Работает нормально, кроме инструмента рисования.Нарисованная точка не совпадает с местом щелчка мыши.Проблема вызвана размещением карты div внутри директивы ion-content и попыткой переопределить некоторые CSS, но безуспешно.Мы собираемся обойти это, извлекая карту div из содержимого и используя jQuery, чтобы вычислить высоту карты div, чтобы получить полную высоту между верхним и нижним колонтитулами.Тем не менее, лучше всего использовать карту 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();
  } 

}