带有谷歌地图的离子侧边菜单

【问题标题】：Ionic Sidemenu with Google map带有谷歌地图的离子侧边菜单
【发布时间】：2015-08-24 17:52:09
【问题描述】：

我正在寻找一种解决方案，我需要 Ionic 侧边菜单，并且主页应该有带有当前位置的 Google 地图。

有人可以告诉我这是如何实现的吗？

更新

我在 codepen here 上发现了类似的东西，并尝试采用相同的方法来满足我的要求。但仍然面临一些问题。

我的 codepen 链接是http://codepen.io/guruprasadvenkatarao/pen/zGdYNr

我认为问题出在这段代码中

google.maps.event.addDomListener(window, 'load', function() {

.....

}

这个函数永远不会被执行。

谁能指出我做错了什么？

【问题讨论】：

你应该看看 Ionic Getting Started ionicframework.com/getting-started。有一个带有侧面菜单的模板。此外，您可以为 Google 地图寻找一些 AngularJS 指令，例如 angular-ui.github.io/angular-google-maps/#!

标签： javascript google-maps ionic-framework ionic

【解决方案1】：

我遇到了完全相同的问题，我假设您可能是像我一样的角度/离子新手。正如您已经发现的那样，原因是 addDomListener 永远不会被触发，所以如果您希望在触发视图时初始化地图，而不是这样做

google.maps.event.addDomListener(window, 'load', function() {
    // ....
}

只是做

$scope.initMap = function() {
    // your code here
}

并将函数添加到您的地图 div 中，如下所示：

<ion-view view-title="Map View">
    <ion-content>
        <div id="map" data-tap-disabled="true" ng-init="initMap()"></div>
    </ion-content>
</ion-view>

附言查看您的代码后，您需要解决的第一个问题是 google api 密钥。如果你看第 24 行，你会看到

<script src="http://maps.googleapis.com/maps/api/js?key=<Google API key>=true"></script>

您需要用有效的密钥替换它。查看Obtaining an API Key。

如果您还有问题，请告诉我！

【讨论】：