Question

它已经有一段时间了，我正在尝试有角度的谷歌地图，我已经成功地创建了地图，但刷新地图却没有成功..不知道为什么，我已经在homectrl中刷新了

我创建了一个主页，用户可以在其中输入他想要在地图中看到的地方。当用户点击提交按钮时，它将转到下一页。

地图页面接收用户输入的名称并显示在地图视图的文本框中，首先我已初始化地图，当用户单击此输入的视图按钮时，将显示搜索地点的地图。代码位于完美的工作条件，但当我刷新地图时不显示并初始化.. ??

＆＃13;

var app = angular.module('starter', ['ngMaterial', 'ngCordova', 'ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'templates/home.html',
      controller: 'homeCtrl'
    })
    .when('/map:companyName', {
      templateUrl: 'templates/map.html',
      controller: 'mapCtrl'
    })
    .otherwise({
      redirectTo: '/home'
    })
});

app.controller('homeCtrl', ['$scope', '$location','$route',
  function($scope, $location,$route) {
    $scope.save = function(companyName) {
      $location.path('/map' + companyName);
    };
    $scope.refresh = function() {
      $route.reload();
    }
  }
]);
app.service('Map', function($q) {
  this.init = function() {
    var options = {
      center: new google.maps.LatLng(40.7127837, -74.00594130000002),
      zoom: 13,
      disableDefaultUI: true
    }
    this.map = new google.maps.Map(
      document.getElementById("map"), options
    );
    this.places = new google.maps.places.PlacesService(this.map);
  }
  this.search = function(str) {
    var d = $q.defer();
    this.places.textSearch({
      query: str
    }, function(results, status) {
      if (status == 'OK') {
        d.resolve(results[0]);
      } else d.reject(status);
    });
    return d.promise;
  }
  this.addMarker = function(res) {
    if (this.marker) this.marker.setMap(null);
    this.marker = new google.maps.Marker({
      map: this.map,
      position: res.geometry.location,
      animation: google.maps.Animation.DROP
    });
    this.map.setCenter(res.geometry.location);
  }
});

app.controller('mapCtrl', function($scope, $routeParams, Map) {
  $scope.place = {};
  console.log($routeParams.companyName);
  $scope.searchPlace = $routeParams.companyName;
  $scope.search = function() {
    $scope.apiError = false;
    Map.search($scope.searchPlace)
      .then(
        function(res) { // success
          console.log("res: " + res);
          Map.addMarker(res);
          $scope.place.name = res.name;
          $scope.place.lat = res.geometry.location.lat();
          $scope.place.lng = res.geometry.location.lng();
        },
        function(status) { // error
          $scope.apiError = true;
          $scope.apiStatus = status;
        }
      );
  }
  Map.init();
});

＆＃13;

#map { 
    height: 400px;
    margin: 20px 0;
    border-radius: 5px;
    border: 1px solid silver;
}/* Empty. Add your own CSS if you like */

＆＃13;

<!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> Map Home</title>
  <link href="css/style.css" rel="stylesheet">
  <link href="js/angular-material.min.css" rel="stylesheet">
  <script src="js/angular.min.js"></script>
  <script src="js/angular-animate.min.js"></script>
  <script src="js/angular-aria.min.js"></script>
  <script src="js/angular-material.min.js"></script>
  <script src="js/ng-cordova.js"></script>
  <script src="js/angular-route.min.js"></script>
  <script src="js/angular-material-icons.min.js"></script>
  <script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="homeCtrl">
  <md-toolbar style="position:fixed !important;" layout="row">
    <md-button aria-label="refresh" ng-click="refresh()">
      <ng-md-icon icon="refresh"></ng-md-icon>
    </md-button>
  </md-toolbar>
  <div style="padding-top:56px !important;" ng-view></div>
  <script type="text/ng-template" id="templates/home.html">
  <div layout-gt-sm="row" ng-controller="homeCtrl">
  <md-input-container class="md-block" flex-gt-sm>
    <label>Company name</label>
    <input type="text" ng-model="companyName">
  </md-input-container>
</div>
<div layout="row" layout-align="center center">
  <md-button class="md-primary" type="button" ng-click="save(companyName)">
    <label>Viewplace</label>
  </md-button>
</div>
</script>
<script type="text/ng-template" id="templates/map.html">
  <div class="container" ng-controller="mapCtrl">
    <form name="searchForm" novalidate ng-submit="search()">
      <div class="input-group">
        <input ng-bind="searchPlace" name="place" type="text" class="form-control" ng-model="searchPlace" required autofocus />
        <span class="input-group-btn">
          <button class="btn btn-primary" ng-disabled="searchForm.$invalid">View Place</button>
        </span>
      </div>
    </form>
    <div id="map"></div>
    <form name="resForm" class="form-horizontal" novalidate ng-submit="send()">
    </form>
  </div>
</script>
</body>

</html>

＆＃13;

＆＃13; 请帮助我们，提前感谢您的帮助..

Answer 1

而不是使用$ route.reload作为刷新功能尝试使用：

$state.go($state.current, {}, {reload: true});//second parameter is for $stateParams

显然，$route.reload()只重新初始化控制器而不是服务。 $window.location.reload();也重新初始化服务。但是，使用$window.location.reload();刷新浏览器本身可能不是一个好的解决方案。

但是，使用$route.reload()，您可以尝试：

var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$route.reload();

模板被缓存。如果这是你想要遵循的方式，那么你需要在调用reload之前从$ templateCache中删除模板。

Answer 2

感谢支持人员，我使用了location.path（'/ map'），在里面我已经给了map.init（）函数来初始化$ scope.refresh（）中的map，这会刷新地图我还需要什么.. :)谢谢亚历克斯为你的时间竖起大拇指

刷新angularjs中的地图

2 个答案: