谷歌地圖不在Android手機離子框架呈現

-1

我有一些問題顯示我的Android手機上的谷歌地圖。此代碼工作完全在谷歌瀏覽器，但我得到一個白色屏幕手機谷歌地圖不在Android手機離子框架呈現

這裏的是我的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; 
});

}）;

感謝您的幫助

來源

2015-05-26 Idir

找到萬一有人的解決方案有同樣的問題

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

來源

2015-05-30 19:56:16 user4957072

添加以下

獲取來自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/

來源

2017-02-10 20:56:04

谷歌地圖不在Android手機離子框架呈現

回答

相關問題