如何在Angularjs控制器中使用初始谷歌地圖

我想在我的角度控制器內實現谷歌示例以下。如何在Angularjs控制器中使用初始谷歌地圖

https://developers.google.com/maps/documentation/javascript/examples/map-simple

<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 

var map; 
function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    zoom: 8 
    }); 
} 

    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" 
     async defer></script> 
    </body> 
</html>

其中谷歌地圖API的負載需要initMap應遵循的窗口範圍內。

角度控制器應該怎麼做？下面的代碼不起作用：

angular.module('testApp') 
    .controller('MainCtrl', function ($scope, $window) { 

    $window.map; 
    $window.initMap = function() { 
     $window.map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
     }); 
    } 

    });

來源

2015-08-19 Ye Huang

根據地圖圖書館的包容順序上，你可以直接調用它是這樣的：

HTML：

<div ng-app="testApp" id="map" ng-controller="MainCtrl"></div>

的Javascript：

var app = angular.module('testApp', []) 
    .controller('MainCtrl', function ($scope, $window) { 
    $window.map = new google.maps.Map(document.getElementById('map'), { 
     center: { 
      lat: -34.397, 
      lng: 150.644 
     }, 
     zoom: 8 
    }); 
});

演示：http://jsfiddle.net/uxe4b9uu/

另外，如果您知道在地圖庫之前已經加載了Angular，您可以按照您的建議在回調中獲取地圖初始化。

來源

2015-08-19 09:44:51

從角度控制器操縱DOM不是處理角色的方式。取決於你的需求，但我建議你看看Angular Google Maps或Angularjs-Google-Maps AngularJs模塊。它們都提供一組指令，您可以在您的html代碼中使用這些指令，然後訪問控制器中的作用域中公開的地圖對象來操作您的地圖。

來源

2015-08-19 14:52:19

添加您的API密鑰和刪除回調= initMap在：

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

來源

2016-07-04 19:29:45 general666

有用的答案雖然你例子實際上是倒退。 – tandrewnichols

然後如何初始化地圖 –

如何在Angularjs控制器中使用初始谷歌地圖

回答

相關問題