带有离子的谷歌地图
Posted
技术标签:
【中文标题】带有离子的谷歌地图【英文标题】：google maps with ionic 【发布时间】：2014-12-21 03:09:33 【问题描述】：我正在尝试使用带有 Ionic 的谷歌地图来实现地图。我遵循了Link 中的编码 但我得到的只是一个空白屏幕，不知道我哪里出错了。请帮忙
这是控制器
angular.module('starter', ['ionic'])
.controller('MapCtrl', function($scope, $ionicLoading, $compile)
function initialize()
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions =
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow(
content: compiled[0]
);
var marker = new google.maps.Marker(
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
);
google.maps.event.addListener(marker, 'click', function()
infowindow.open(map,marker);
);
$scope.map = map;
google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function()
if(!$scope.map)
return;
$scope.loading = $ionicLoading.show(
content: 'Getting current location...',
showBackdrop: false
);
navigator.geolocation.getCurrentPosition(function(pos)
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
, function(error)
alert('Unable to get location: ' + error.message);
);
;
$scope.clickTest = function()
alert('Example of infowindow with ng-click')
;
);
这是html文件
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
<body ng-controller="MapCtrl">
<ion-header-bar class="bar-dark" >
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</body>
请帮忙。
【问题讨论】：
【参考方案1】：我改变了一些东西来让它工作：
你不再需要谷歌地图的 api 密钥，这对于脚本 src 来说已经足够了（参见 Whats the Google Maps API Key）：
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
将“function initialize()”替换为“$scope.init()”并注释掉它所在的行：
//google.maps.event.addDomListener(window, 'load', initialize);
还可以像这样将 ng-init="init()" 添加到您的 html 中：
<ion-header-bar class="bar-dark" ng-init="init()">
<h1 class="title">Map</h1>
</ion-header-bar>
我不知道为什么它不能与 domListener 一起使用，但数据需要在显示之前进行初始化（请参阅Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null）。使用 ng-init 你可以实现这一点。
最终控制器应如下所示：
.controller('MapCtrl', function($scope, $ionicLoading, $compile)
$scope.init = function()
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions =
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow(
content: compiled[0]
);
var marker = new google.maps.Marker(
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
);
google.maps.event.addListener(marker, 'click', function()
infowindow.open(map,marker);
);
$scope.map = map;
;
// google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function()
if(!$scope.map)
return;
$scope.loading = $ionicLoading.show(
content: 'Getting current location...',
showBackdrop: false
);
navigator.geolocation.getCurrentPosition(function(pos)
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
, function(error)
alert('Unable to get location: ' + error.message);
);
;
$scope.clickTest = function()
alert('Example of infowindow with ng-click')
;
);
希望这有帮助！
【讨论】：
你好，我在浏览器中完成了，但在移动地图中没有加载任何想法？ @error1337 当我在页面中打开它时它会显示，但是当我以模态打开它时它不会..你能帮忙吗？ 我可以试试，但是我必须看看你的代码:)！请创建一个小提琴或 plunkr，我会看看 我可以尝试使用非结算帐户吗？【参考方案2】：或者只是替换这个
google.maps.event.addDomListener(window, 'load', initialize);
为此
ionic.Platform.ready(initialize);
参考http://codepen.io/mircobabini/developer/ionic-google-maps-nightly
【讨论】：
【参考方案3】：如果您使用的是最新版本的 Ionic，您可能会在为 android 部署时遇到空白屏幕，但当您在 Web 浏览器中运行解决方案时会看到地图。 要解决您需要添加白名单插件的问题，请运行：ionic plugin add cordova-plugin-whitelist。
【讨论】：
嘿大卫，我试过了，但是当使用 Ionic View 查看应用程序时，它仍然显示为空白（甚至没有显示菜单）。还有其他想法吗？ 你能在 plunker 上分享吗？ 这与我使用的 codepen.io/ionic/details/uzngt 类似【参考方案4】：在 github 上查看这个项目
http://angular-ui.github.io/angular-google-maps/#!/
它使用 Angular.js 指令为 Google 地图的大部分功能提供 API。
【讨论】：
【参考方案5】：您可以使用为 angularjs 完成的插件 angularjs-google-maps (ngmap)。 它适用于离子。 它使您能够使用 google map v3。
https://github.com/allenhwkim/angularjs-google-maps
【讨论】：
【参考方案6】：我通过设置一个 in 解决了这个问题：
<ion-content ng-controller="MapCtrl">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
然后你必须这样做：
.controller('MapCtrl', function($scope, $ionicLoading)
google.maps.event.addDomListener(window, 'load', function()
var newLatlng = new google.maps.LatLng(53.5000, -113.4300);
var mapOptions =
center: newLatlng,
zoom: 15,
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;
);
);
参考来自：Implement Google Maps Using Ionic Framework
【讨论】：
以上是关于带有离子的谷歌地图的主要内容，如果未能解决你的问题，请参考以下文章