Question

我有一些问题在我的Android手机上显示谷歌地图。此代码在Google Chrome上完美运行，但我在手机上显示白屏

这是我的HTML代码：

<body ng-app="starter" ng-controller="ctrl"> <ion-content> <div id="map"></div> </ion-content> </body>

这是javascript：

app.controller('ctrl', function($scope, $ionicLoading) {

 google.maps.event.addDomListener(window, 'load', function() {
    var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

    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"
        });
    });

    $scope.map = map;
});

}）;

感谢您的帮助

Answer 1

找到解决方案以防有人遇到同样的问题

您需要使用谷歌提供的API密钥 https://developers.google.com/maps/documentation/javascript/tutorial#api_key

Answer 2

添加以下

从Google开发者控制台获取密钥。

<script src="http://maps.googleapis.com/maps/api/js?key=<AIzXXXXXXXXXXXXXXX.......>&sensor=true">

Hmtl：

<div id="map-canvas"  data-tap-disabled="true"> 
            </div>

添加css：

#map {
  display: block;
  width: 100%;
  height: 100%;
}
.scroll {
  height: 100%;
}

参考： https://github.com/driftyco/ionic-starter-maps

http://ngcordova.com/docs/plugins/geolocation/

谷歌地图不能在Android手机离子框架上渲染

2 个答案: