谷歌地圖不能加載時按下按鈕

我在我的離子應用程序中使用谷歌地圖，加載罰款時，用戶打開第一次頁面，但導航到其他頁面，並返回到地圖頁面後，谷歌地圖不會顯示。我相信它有使用映射腳本，做一些與我的index.html我試着在我的map.html但沒有成功谷歌地圖不能加載時按下按鈕

的Index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
     <title></title> 
     <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
     <link href="css/style.css" rel="stylesheet"> 
     <script src="lib/ionic/js/ionic.bundle.js"></script> 
     <script src="cordova.js"></script> 
     <script src="js/app.js"></script> 
     <script src="js/controllers.js"></script> 

    </head> 
    <body ng-app="starter"> 
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBJmvb_zA6sBKsF3w6wS5Xv4KDr0-hBBko&libraries=places"></script> 
<ion-nav-view> </ion-nav-view> 
    </body> 
</html>

map.html將其注入

<ion-view> 
<ion-nav-bar align-title="center" class=" bar-royal"> 
    <ion-nav-title> 
    <span>Find Hotels</span> 
</ion-nav-title> 
    </ion-nav-bar > 
<ion-content padding="true"> 

     <div class="list list-inset"> 
    <label class="item item-input"> 
    <i class="icon ion-search placeholder-icon"></i> 
    <input id="pac-input" type="text" placeholder="Search Location" data-tap-disabled="true" ng-change='disableTap()' ng-model="as"> 

    </label> 
</div> 
    <div id="map" style="height:50%; border:1px solid grey"></div> 
</ion-content> 
</ion-view>

Controller.js

.controller('MapController', function($scope, $ionicLoading, $location,$timeout, $http, customservice) { 

$scope.fa = function(a, room_avail,prop_id) { 

    customservice.hotel_info={} 
    angular.extend(customservice.hotel_info, {hotelName: a.innerHTML, roomsAvail: room_avail, propertyId : prop_id}) 
    $timeout(function() { 
    $location.path('/hotel'); 
}, 0); 
} 

google.maps.event.addDomListener(window, 'load', initAutocomplete) 
function initAutocomplete() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 18, 
     center: new google.maps.LatLng(26.8611568,80.9356349), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 


    // Create the search box and link it to the UI element. 
    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 


    // Bias the SearchBox results towards current map's viewport. 
    map.addListener('bounds_changed', function() { 
    searchBox.setBounds(map.getBounds()); 
    }); 

    var markers = []; 
    // Listen for the event fired when the user selects a prediction and retrieve 
    // more details for that place. 
    searchBox.addListener('places_changed', function() { 

    var places = searchBox.getPlaces(); 
// 
     var locurl = "http://XXXXXXXXXXXXXXXX/getproperties" 
     $http.post(locurl, {latitude : places[0].geometry.location.lat(0) , longitude : places[0].geometry.location.lng(0) 
}).then(function(su){ 
      var locations = su.data.data.map(function (item) { 
    return ['<span onclick="angular.element(this).scope().fa(this,'+item.room_avaialble+','+item.id+')">'+item.name+'</span>', item.latitude, item.longitude]; 
}); 
      var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 
      // to set zoom after markers by sam 
      // map.setZoom(14); 
     }, 
     function(er){ 
      alert('er'+ JSON.stringify(er)) 
     }) 
     // alert(places[0].geometry.location.lat(0)); 
     // 
    if (places.length == 0) { 
     return; 
    } 

    // Clear out the old markers. 
    markers.forEach(function(marker) { 
     marker.setMap(null); 
    }); 
    markers = []; 

    // For each place, get the icon, name and location. 
    var bounds = new google.maps.LatLngBounds(); 
    places.forEach(function(place) { 
     if (!place.geometry) { 
     console.log("Returned place contains no geometry"); 
     return; 
     } 
     var icon = { 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(25, 25) 
     }; 

     // Create a marker for each place. 
     markers.push(new google.maps.Marker({ 
     map: map, 
     icon: icon, 
     title: place.name, 
     position: place.geometry.location 
     })); 

     if (place.geometry.viewport) { 
     // Only geocodes have viewport. 
     bounds.union(place.geometry.viewport); 
     } else { 
     bounds.extend(place.geometry.location); 
     } 
    }); 
    map.fitBounds(bounds); 
    }); 
     } 
$scope.disableTap = function() { 
var container = document.getElementsByClassName('pac-container'); 
angular.element(container).attr('data-tap-disabled', 'true'); 
var backdrop = document.getElementsByClassName('backdrop'); 
angular.element(backdrop).attr('data-tap-disabled', 'true'); 
angular.element(container).on("click", function() { 
document.getElementById('pac-input').blur(); 
}); 
}; 
})

來源

2017-03-17 sam

是GoBack的後您的地圖是灰色的？你可以嘗試調用'google.maps.event.trigger（map，'resize'）;'爲你的地圖 –

@jo沒有空白。 – sam

你是如何加載你的地圖？請顯示您的控制器或您正在加載的服務？嘗試使用Ionic的生命週期事件'$ scope。$ on（「$ ionicView.enter」，function（）{loadMap（）}）; ' – yaboiduke

多挖後，我發現它

$scope.$on("$ionicView.enter", function(){ 
initAutocomplete() 
});

來源

2017-03-17 13:51:17 sam

谷歌地圖不能加載時按下按鈕

回答

相關問題