2015-06-09 6 views
1

Я ищу решение, где мне нужно иметь Ionic sidemenu, а на главной странице должна быть карта Google с текущим местоположением.Ionic Sidemenu с Google map

Может кто-нибудь, пожалуйста, дайте мне знать, как это можно достичь?

ОБНОВЛЕНО

я нашел что-то похожее на codepen here и попытался принять то же самое, чтобы достигнуть моего требования. Но по-прежнему стоит проблема.

Мой codepen ссылка http://codepen.io/guruprasadvenkatarao/pen/zGdYNr

Я думаю, что проблема где-то в этом коде

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

..... 

} 

Эта функция никогда не выполняется.

Может кто-нибудь указать, что я делаю неправильно?

+1

Вы должны ознакомиться с Ionic Getting Started http://ionicframework.com/getting-started/. Существует шаблон с сайдэмену. Кроме того, вы можете найти какую-то директиву AngularJS для Google Maps, такую ​​как http://angular-ui.github.io/angular-google-maps/#!/ – e666

ответ

0

У меня была одна и та же проблема, и я предполагаю, что вы, вероятно, новичок с угловыми/ионными типами, как я. Причина, как вы уже поняли, это то, что 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 go. Если вы посмотрите на строку 24, вы увидите

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

и вам необходимо заменить его на действующий ключ. Выезд Obtaining an API Key.

Сообщите мне, если у вас все еще есть проблемы!

Смежные вопросы