地图在设备上不起作用

Question

I spent a lot of time trying to figure this out. I have a map on my application and this map loads the actual location once it is loaded.

For some reason on my viewer (using Ionic Viewer) it works on my local device and on my localhost, but When I test it on my iPhone directly from Xcode, the map don't load.

If I compile an .apk and test it on android, the map don't load either.

.controller('mapaCtrl', function($scope, $compile, $location) {

    $scope.goPayment = function() {
        $location.path('side-menu/history');
    };


var myLatlng = new google.maps.LatLng(34.603711, -58.381585);

    var mapOptions = {
        center: myLatlng,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    navigator.geolocation.getCurrentPosition(function(pos) {
        map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        var myLocation = new google.maps.Marker({
            position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
            map: map,
            title: "My Location"
        });

        google.maps.event.addListener(myLocation, 'click', function() {
            infowindow.open(map,myLocation);
        });
    });


    var contentString = "<div><a ng-click='clickTest()'>Pagar Aqui!</a></div>";
    var compiled = $compile(contentString)($scope);

    var infowindow = new google.maps.InfoWindow({
      content: compiled[0]
    });

  $scope.map = map;

      $scope.clickTest = function() {
    $location.path('side-menu/pay');
  };




})

Any clue?

Answer 1

There may be several things affecting the proper functionality of your app, consider the following:

• There could be an issue where the requests to google maps are blocked. Check out the whitelist plugin: https://stackoverflow.com/a/29896923/1956540

• Try adding geoLocation permissions, here is an article I found that walks you through the whole thing: http://www.gajotres.net/using-cordova-geoloacation-api-with-google-maps-in-ionic-framework/

  It is also important to wrap geolocation code into Ionic deviceready event, execution will timeout without it:

  ionic.Platform.ready(function() { // Code goes here }

I'm not sure it's necessary to have these anymore but I know for Android you could verify the permissions needed to exist in AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

There is probably some iOS equivalent that you can search for but I think installing the plugin should work on its own.

--