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

【问题标题】：Using Google Maps API on Single page application - Error using multiple times the api在单页应用程序上使用 Google Maps API - 多次使用 api 时出错
【发布时间】：2016-11-20 23:16:25
【问题描述】：

我有一个使用谷歌地图 API 的 Angular WebApp。它在 html 视图中加载。单击状态更改为另一个页面并加载地图。这是第一次运行良好。当我返回加载页面时，我的控制台显示：您已在此页面上多次包含 Google Maps API。这可能会导致意外错误。当我再次加载地图时，发生了一些意外错误。

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

我正在使用 angular google maps 指令：https://angular-ui.github.io/ 并通过以下方式实现它：

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

在加载它的页面上。

地图页面已加载解析“uiGmapgoogle-maps”指令。

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

说明第一页：

.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>

【问题讨论】：

标签： angularjs google-maps

【解决方案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'])

          })

那就停止像这样导入谷歌地图

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

Angular 谷歌地图已经做到了。

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

【讨论】：

谢谢！现在它正在工作！但我仍然在控制台中收到“无 api 密钥”错误。好吧，地图在没有的情况下也能正常工作，但我该如何配置它？我不清楚我必须在哪里放置配置。它似乎没有加载。我想。我是否需要创建一个配置文件并同时加载它？
实际上它不起作用。我正在检查一个正在运行的旧版本。我无法像文档中那样通过配置加载 apiKey。它没有加载。
你应该在模块声明之后插入它，像这样：angular .module('yourModule') .config(config); config.$inject = ['uiGmapGoogleMapApiProvider']; function config(uiGmapGoogleMapApiProvider){ uiGmapGoogleMapApiProvider.configure({ key: 'YOUR_KEY', libraries: 'LIBRARIES_YOU_NEED' }); };

【解决方案2】：

mcrvaz 的回答解决了我的问题。我删除了内联 javascript 文件。并在控制器中加载了 uiGmapgogole 地图实例。就像在文档中一样。

.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) {

});

});

我错过了将“uiGmapGoogleMapApi”放在控制器头中。

【讨论】：