3 Replies Latest reply on Mar 28, 2017 10:11 PM by jason102

    Map APIs Displaying Incorrectly in PhoneGap

    jason102

      Hi, I'm trying to convert my web browser app to a PhoneGap app on my Android phone. I'm having trouble getting a map API to display correctly.

       

      I'm using AMap, Alibaba's Chinese map API: http://lbs.amap.com/

       

      I'm able to make it work just fine in my computer's web browser (Microsoft Edge). Here's the code and a screenshot of it showing Beijing:

      <!doctype html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
          <title>AMap Test</title>
          <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
          <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
          <script src="http://webapi.amap.com/maps?v=1.3&key=MY_SECRET_KEY&plugin=AMap.Scale,AMap.ToolBar,AMap.Au tocomplete,AMap.PlaceSearch,AMap.Transfer,AMap.Driving,AMap.Walking,AMap.Geolocation,AMap. Geocoder,AMap.Riding"></script>
      </head>
      <body>
      <div id="container"></div>

      <script>
          var map = new AMap.Map('container', {
              resizeEnable: true,
              zoom:11,
              center: [116.397428, 39.90923],
        isHotspot: true
          });
      var scale = new AMap.Scale();
      var toolBar = new AMap.ToolBar();
      map.addControl(scale);
      map.addControl(toolBar);
      </script>
      </body>
      </html>

      Capture.JPG

       

      But PhoneGap is having difficulty. I can get the basic map to display, but large white empty areas display when I move the map around, and the scale and toolBar do not display correctly:

      Screenshot_2017-03-06-17-56-20-020_com.adobe.phonegap.app.jpg

      Screenshot_2017-03-06-17-56-01-888_com.adobe.phonegap.app.jpg

      You can see how the scale and toolBar are strangely unstyled in the top left corner. After moving the map, these controls are completely covered and hidden when they should be displayed on top of the map. Here's my code in index.html (I'm working off of the HelloWorld template):

      <!DOCTYPE html>

      <html>

      <head>

          <meta charset="utf-8" />

          <meta name="format-detection" content="telephone=no" />

          <meta name="msapplication-tap-highlight" content="no" />

          <meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width" />

          <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

          <title>Hello World</title>

      </head>

      <body>

          <div id="geolocation" style="width: 310px; height: 610px;"></div>

          <script type="text/javascript" src="cordova.js"></script>

          <script type="text/javascript" src="js/index.js"></script>

      <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=MY_SECRET_KEY&plugin=AMap.Scale,AMap.ToolBar,AMap.Au tocomplete,AMap.PlaceSearch,AMap.Transfer,AMap.Driving,AMap.Walking,AMap.Geolocation,AMap. Geocoder,AMap.Riding"></script>

      <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

          <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>

          <script type="text/javascript">

              app.initialize();//default helloworld style sheet: <link rel="stylesheet" type="text/css" href="css/index.css" />

          </script>

      </body>

      </html>

       

      And my index.js:

      var app = {

          initialize: function() {

              this.bindEvents();

          },

          bindEvents: function() {

              document.addEventListener('deviceready', this.onDeviceReady, false);

          },

       

          onDeviceReady: function() {

              navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);

          },

       

      onSuccess: function(position) {

        var mapLanguage = "zh_en";

        var map = new AMap.Map('geolocation', {

         resizeEnable: true,

         zoom:11,

         center: [116.397428, 39.90923],

         isHotspot: true

        });

        var scale = new AMap.Scale();

        var toolBar = new AMap.ToolBar();

        map.addControl(scale);

        map.addControl(toolBar);

      },

       

      onError: function(error) {

        alert(error);

      }

      };

       

      I did not modify any other PhoneGap project file. Any suggestions as to what steps I should take to solve this issue? Why does it work correctly in my computer's browser but not in PhoneGap?