Question

我在我的离子应用程序中使用谷歌地图，当用户第一次打开页面但导航到其他页面并返回到地图页面谷歌地图不会显示时加载正常。我相信它必须在index.html中使用map脚本做一些事情我尝试在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();
});
};
})

Answer 1

经过多次挖掘后我发现了它

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

按下后退按钮

1 个答案: