在單頁應用程序上使用Google Maps API - 使用多次api的錯誤

我有一個使用Google Map API的角度WebApp。它在html視圖中加載。單擊時，狀態會更改爲其他頁面並加載地圖。這是第一次運作良好。當我回到加載頁面時，我的控制檯說：您已在此頁面上多次包含Google Maps API。這可能會導致意外的錯誤。當我再次加載地圖時，一些意外的錯誤正在發生。在單頁應用程序上使用Google Maps API - 使用多次api的錯誤

所以我的問題：是否有可能重置谷歌地圖API，以便它刷新每次我回去？或者我可以刪除該實例，或者我應該怎麼做？

我使用角谷歌地圖指示：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>

來源

2016-11-20 elpeyotl

首先，設置在控制器上的狀態，而不是你的模板。

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

角谷歌地圖已經這樣做了。

要操縱地圖並插入API密鑰，請看一下here。

來源

2016-11-21 00:47:50 mcrvaz

謝謝！現在它正在工作！但是我仍然在控制檯中看到「no api key」錯誤。以及地圖工作沒有，但我如何配置它？我不明白我必須把配置放在哪裏。它似乎沒有加載。我認爲。我是否需要創建一個配置文件並對其進行layzload？ – elpeyotl

它實際上不工作。我正在檢查一個正在工作的舊版本。我無法像在文檔中那樣通過配置加載apiKey。它沒有加載。 – elpeyotl

您應該在模塊聲明之後插入它，如下所示： 'angular .module（'yourModule'）。配置（配置）; 。設置$注入= [ 'uiGmapGoogleMapApiProvider']; 功能配置（uiGmapGoogleMapApiProvider）{ uiGmapGoogleMapApiProvider.configure（{ 鍵： 'YOUR_KEY'，庫： 'LIBRARIES_YOU_NEED' }）; }; ' – mcrvaz

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」放在控制器頭部。

來源

2016-11-21 08:01:04 elpeyotl

在單頁應用程序上使用Google Maps API - 使用多次api的錯誤

回答

相關問題