角度/离子谷歌地图的状态变化
Angular / Ionic google maps on state change
好的,所以我对角度和离子完全陌生,所以如果有一个简单的答案,请原谅我。
基本上我的问题是,如果我加载带有谷歌地图的页面,则只有当这是首先加载的页面时,它才能正常工作。如果我将其加载到不同的状态,然后移动到带有谷歌地图的状态,它不会超过"google.maps.event.addDomListener(window, 'load', function(( {"。
我假设这可能与这种挂钩到窗口加载有关,但我只是不知道了。有人经历过吗?
这是我当前的代码。
angular.module('app', ['ionic'])
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
google.maps.event.addDomListener(window, 'load', function() {
var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
var mapOptions = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
navigator.geolocation.getCurrentPosition(function(pos) {
var site = new google.maps.LatLng(55.9666469,-3.1708493);
/* $('#map').appendTo('.map-container');
google.maps.event.trigger(map,'resize');*/
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);
directionsService.route({
provideRouteAlternatives:true,
destination: site,
origin: pos.coords.latitude+","+ pos.coords.longitude,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
// alert(route.legs[1].duration.text);
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
summaryPanel.innerHTML += route.legs[i].start_address + ' to <br>';
summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
summaryPanel.innerHTML += route.legs[i].duration.text + '<br>';
summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
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"
});
var infowindow = new google.maps.InfoWindow({
content:"My Location"
});
infowindow.open(map,myLocation);
});
$scope.map = map;
});
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('page4', {
url: '/page4',
templateUrl: 'page4.html'
})
.state('page5', {
url: '/login',
templateUrl: 'page5.html'
})
.state('page6', {
url: '/page6',
templateUrl: 'page6.html'
})
.state('page7', {
url: '/page7',
templateUrl: 'page7.html'
})
.state('page8', {
url: '/page8',
templateUrl: 'page8.html',
controller: 'MapCtrl'
})
.state('page9', {
url: '/page9',
templateUrl: 'page9.html'
})
.state('page11', {
url: '/page11',
templateUrl: 'page11.html'
})
.state('page10', {
url: '/page10',
templateUrl: 'page10.html'
})
;
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
尝试将google.maps.event.addDomListener(window, 'load', function() {...})
替换为ionic.Platform.ready(function() {...})
或者在 HTML 和控制器中设置ng-init=init()
,而不是google.maps.event.addDomListener(window, 'load', function() {...})
$scope.init = function() {...}
相关文章:
- React redux初始化功能,无论状态变化如何
- 检测Ionic中特定的应用程序状态变化
- ReactJS-这个状态中的数组在删除时被正确更新,但结果是't,直到以后的状态发生变化
- 消除淘汰中引导程序开关状态变化的歧义
- 反应组件交互和全局状态变化
- 根据单选按钮的状态变化使儿童内容出现/消失
- 观察angular ui路由器的状态变化
- 如何与Redux沟通React组件之间的UI状态变化
- html5事件监听器详细节点状态变化
- 角度/离子谷歌地图的状态变化
- ReactJS -检测状态变化的问题
- 处理ReactJs中的状态变化
- 按钮循环3个状态变化
- 每次状态变化时的离子运行函数
- FP:在没有实际状态变化的情况下反映状态
- ReactJS:如何测试状态变化
- 发生状态变化时不应用ng类
- 动态jQuery CSS具有三状态滚动背景位置根据状态变化
- 承诺后的角度状态变化
- 是否有管理事件的“量子状态变化”的有用模式?(特别是在JavaScript中)