5
私はイオンモーダルでGoogleの場所を使用しようとしていますが、場所を選択することはできません。Googleの場所はイオンモーダル画面では機能しません
メイン画面が正常に動作しています。私は場所を検索して選択することができた。 「Googleプレイス」ボタンをクリックしてモーダルウィンドウを開くと、モーダルウィンドウでアドレスを選択できません。私はモーダルウィンドウで緯度と経度を取得していません。
ご協力いただければ幸いです。
私plunkerを参照してください。ここ
http://plnkr.co/edit/e01DFWDvicLJa6Ouluz7?p=preview1
は私のhtmlです：
<ion-content>
<div>
<div>Google Places Autocomplte integration in Angular</div>
<div>To Test, start typing the name of any Indian city</div>
<div>selection is: {{chosenPlace}}</div>
<div>
<input ng-model="chosenPlace" details="chosenPlaceDetails" googleplace/>
</div>
<div>lat: {{chosenPlaceDetails.geometry.location.lat()}}</div>
<div>lang: {{chosenPlaceDetails.geometry.location.lng()}}</div>
</div>
<!-- <div id="map" data-tap-disabled="true"></div> -->
</ion-content>
モーダルHTML：
<div class="modal">
<ion-header-bar>
<h1 class="title">Choose </h1>
<a ng-click="closeGooglePlaceModal()()" class="button button-icon icon ion-close"></a>
</ion-header-bar>
<ion-content>
<ul class="list">
<li class="item" ng-click="clickLocationItem(item.ID)" ng-repeat="item in locations" ng-bind-html="item.Nome"></li>
</ul>
<div>
<div>Google Places Autocomplte integration in Angular</div>
<div>To Test, start typing the name of any Indian city</div>
<div>selection is: {{chosenPlace1}}</div>
<div>details object is Lattitude: {{chosenPlaceDetails1.geometry.location.lat()}}</div>
<div>
<input ng-model="chosenPlace1" details="chosenPlaceDetails1" googleplace/>
</div>
</div>
</ion-content>
</div>
app.js：
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
/*https://github.com/jvandemo/angularjs-google-maps*/
.directive('googleplace', function() {
return {
require: 'ngModel',
scope: {
ngModel: '=',
details: '=?'
},
controller: function($scope) {
//$scope.gPlace;
console.log("....1");
},
link: function(scope, element, attrs, model) {
var options = {
types: [],
componentRestrictions: {}
};
scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
console.log("....2");
scope.$apply(function() {
scope.details = scope.gPlace.getPlace();
console.log(scope.details.geometry.location.lat());
model.$setViewValue(element.val());
});
});
}
};
})
.controller('MapCtrl', function($scope, $ionicLoading, $compile, $cordovaGeolocation, $ionicPlatform, $ionicModal) {
$scope.gPlace;
$ionicModal.fromTemplateUrl('googleplace.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modalGooglePlace = modal;
// $scope.modal.show();
});
$scope.openGooglePlace = function() {
/*prepare modal*/
$scope.modalGooglePlace.show();
}
$scope.closeGooglePlaceModal = function() {
$scope.modalGooglePlace.hide();
}
});
について、
この問題を解決しましたか？私は同じ問題を抱えている。 – Daniel