Question

我有一个有角度的WebApp，我在其中使用google Map API。它在html视图中加载。单击状态将更改为另一个页面并加载地图。它第一次运作良好。当我返回加载页面时，我的控制台会说：您已在此页面上多次添加Google Maps API。这可能会导致意外错误。当我再次加载地图时，会发生一些意外错误。

所以我的问题：是否可以重置google Maps API，以便每次我回去时都会刷新？或者我可以删除实例或我该怎么办？

我使用了有角度的google maps指令：https://angular-ui.github.io/并使用以下方法实现：

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX" type="text/javascript">

在正在加载它的页面上。

地图页面加载了解析＆＃39; uiGmapgoogle-maps＆＃39;指示。

我使用内联javascript导致我无法弄清楚如何将api密钥传递给指令设置。我在Google地图页面之前加载它，因此地图加载得很好。

州首页：

.state('apps.vermittlungDetail', {
                  url: '/vermittlung/detail/:taskID',
                  templateUrl: 'tpl/apps_vermittlung_detail.html',
                  controller: 'XeditableCtrl',
                  resolve: load( ['ui.select','toaster','js/app/globalServices/global-services.js','js/app/vermittlung/newTask-service.js','js/controllers/bootstrap.js','js/app/vermittlung/vermittlung-detail.js','js/app/annulation/annulation-service.js','js/app/smsTool/smsTool-service.js','js/app/emailMami/emailmami-service.js'  ,'js/app/vermittlung/vermittlung-service.js', 'smart-table','xeditable','js/controllers/xeditable.js', 'moment'])
              })

状态第二页（地图）

.state('apps.vermittlungGoogleMap', {
                  url: '/vermittlungMap',
                  templateUrl: 'tpl/apps_vermittlung_googlemap.html',
                  resolve: load( ['uiGmapgoogle-maps','toaster','js/app/vermittlung/vermittlung-detail.js', 'js/app/vermittlung/vermittlung-service.js'])

              })

HTML第二页

<div ng-controller="vermittlungDetailCtrl"> <!--SET CONTROLLER-->

    <ui-gmap-google-map center='map.center' zoom='map.zoom'>
      <ui-gmap-markers models="markers" coords="'self'" icon="'icon'" options="markers.options" click="onClickMarker">
      </ui-gmap-markers>

      <ui-gmap-window options="windowOptions" show="showWindow" coords="windowData.model" closeClick="closeClick()">
          <div>
          <div class="m-b-sm">{{currentMarkerTitle}}<br>{{currentMarkerPhone}}</div>
          <button class="btn btn-info btn-xs" ng-click="$parent.sendMamiSMS($parent.tasktosend,$parent.currentMarkerPhone,$parent.currentMarkerTitle)">SMS senden</button>
          </div>
            </ui-gmap-window>

    </ui-gmap-google-map>

    </div>

Answer 1

首先，将控制器设置为您的状态，而不是您的模板。

.state('apps.vermittlungGoogleMap', {
              url: '/vermittlungMap',
              controller: 'vermittlungDetailCtrl',
              templateUrl: 'tpl/apps_vermittlung_googlemap.html',
              resolve: load( ['uiGmapgoogle-maps','toaster','js/app/vermittlung/vermittlung-detail.js', 'js/app/vermittlung/vermittlung-service.js'])

          })

然后停止导入这样的GoogleMaps

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX" type="text/javascript">

Angular Google Maps已经做到了。

要操纵地图并插入API密钥，请查看here。

Answer 2

mcrvaz的答案解决了我的问题。我删除了内联的javascript文件。并在控制器中加载uiGmapgogole map Instance。就像在文档中一样。

.controller("someController", function($scope, uiGmapGoogleMapApi) {
// Do stuff with your $scope.
// Note: Some of the directives require at least something to be defined originally!
// e.g. $scope.markers = []

// uiGmapGoogleMapApi is a promise.
// The "then" callback function provides the google.maps object.
uiGmapGoogleMapApi.then(function(maps) {

});

}）;

我错过了推送＆＃34; uiGmapGoogleMapApi＆＃34;在控制器头部。

在单页面应用程序上使用Google Maps API - 使用api多次出错

2 个答案: