Question

我正在使用Apache Cordova创建一个Android应用程序，我正在使用Google Maps JavaScript API并在Cordova应用程序的Web视图中的HTML页面中托管地图。地图显示正常，控件（缩放，平移等）也可以正常工作。

每当我在地图上有任何形状或标记时，这些都不会出现在Android模拟器中。如果我在已连接的Android设备上运行该应用，则会完全按照应有的方式显示该应用。

我实际上已经看到过这种情况发生在我写过的其他一些Cordova应用程序中。每隔一段时间，标记就会出现一段时间。是什么导致这种情况发生？有什么方法可以强制重绘所有叠加层吗？

如何复制

cordova create simple-map com.example.simplemap SimpleMap
cd simple-map
cordova platform add android@6.3.0 --save
在www/index.html中，删除<meta http-equiv="Content-Security-Policy" ...>代码
删除<body></body>的内容并将其替换为以下内容。请务必将YOUR_API_KEY替换为有效的Google Maps JavaScript API key。

<div id="map"></div>

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzUUcYSV0U0lAQhGKTO9Ccq67V_qsy5Lc&callback=initMap" async defer></script>

使用以下内容替换www/css/index.css的内容。

#map {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

使用以下内容替换www/js/index.js的内容。

var app = {

  map: null,

  init: function init() {
    var position = {
          lat: 43.074698,
          lng: -89.384107
        };

    this.map = new google.maps.Map(document.getElementById('map'), {
      center: position,
      zoom: 12
    });

    new google.maps.Marker({
      position: position,
      map: this.map
    });

    new google.maps.Circle({
      strokeColor: '#aa00ff',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#9c27b0',
      fillOpacity: 0.35,
      map: this.map,
      center: position,
      radius: 500
    });
  }

};

function initMap() {
  app.init();
}

cordova run android

Google地图（JavaScript）标记和形状不会显示在Android模拟器中

0 个答案: