如何在不使用任何指令的情况下以角度初始化Google Maps API？ [英] How to initialize google maps API in angular without using any directives?
问题描述
我正在尝试在我正在编写的应用程序中使用Google地图，我正在使用某些功能正在工作的地方api，
现在我试图在页面上显示地图，但是地图永远不会出现。我在使用下面的代码时没有在控制台上发现任何错误。
index.html
< script src =https://maps.googleapis.com/maps/api/js?key=mykey&libraries=places>< /脚本>
mapview.html
< div ng-controller =MapViewController as mapctrlng-init =initialize（）>
< div class =container>
< div class =row>
< div id =map>< / div>
< / div>
< div ui-view>< / div>
< / div>
< / div>
mapViewController.js
（function（angular）{
angular.module（'myapp'）。controller（'MapViewController'，['$ state'，'$ http'，' $ stateParams'，'$ window'，'$ route'，'$ document'，'$ localStorage'，'$ scope'，'$ location'，函数（$ state，$ http，$ stateParams，$ window，$ route ，$ document，$ localStorage，$ scope，$ location）{
$ scope.initialize = function（）{
console.log（log）;
var mapOptions = {
zoom：11，
center：{lat：-34.397，lng：150.644}，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（'map'），mapOptions）;
};
}]）;
}） （角度）
当控制器初始化但地图不显示时，我得到日志消息这一页。
我想知道如何在不使用任何指令的情况下实现它。
$ p $
< html ng-app = ng-app mapApp >
。 。 。
< body ng-controller =MapControllerng-init =initMap（）>
< div id =map>< / div>
< / body>
< / html>
然后在JS上正确初始化您的地图：
angular.module（'mapApp'，[]）;
.module（'mapApp'）
.controller（'MapController'，MapController）;
函数MapController（$ scope）{
$ b $ scope.initMap = function（）{
var map = new google.maps.Map（document.getElementById（ 'map'），{
zoom：3，
center：new google.maps.LatLng（32.483，16.084）
}）;
}
}
并给出高度和宽度添加到您的ID：
#map {
height：400px;
width：700px;
border：2px纯红色;
}
这里您可以找到我是一个Plunker，它在没有指令的情况下初始化一个地图。
希望我的帮助很大。 / p>
I am trying to initalize google maps in the application I am writing, I am using the places api for some of the functionalities which is working fine, Now I am trying to show a map on a page but the map never shows up. i do not get any error on the console when I use the following code.
index.html
<script src="https://maps.googleapis.com/maps/api/js?key=mykey&libraries=places"></script>
mapview.html
<div ng-controller="MapViewController as mapctrl" ng-init="initialize()">
<div class="container">
<div class="row">
<div id="map"></div>
</div>
<div ui-view></div>
</div>
</div>
mapViewController.js
(function(angular) {
angular.module('myapp').controller('MapViewController', ['$state','$http','$stateParams','$window','$route','$document','$localStorage','$scope','$location', function($state,$http,$stateParams,$window,$route,$document,$localStorage,$scope,$location) {
$scope.initialize = function(){
console.log("log");
var mapOptions = {
zoom: 11,
center: {lat: -34.397, lng: 150.644},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
};
}]);
})(angular)
I get the log message when the contoller is initialized but the map doesn't show on the page. I would like to know how can I make it possible without using any directive.
Make sure to define ng-app on your html:
<html ng-app="mapApp">
. . .
<body ng-controller="MapController" ng-init="initMap()">
<div id="map"></div>
</body>
</html>
Then to initialize correctly your map on JS:
angular.module('mapApp', []);
angular
.module('mapApp')
.controller('MapController', MapController);
function MapController($scope){
$scope.initMap = function() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: new google.maps.LatLng(32.483, 16.084)
});
}
}
And give height and width to your id:
#map{
height: 400px;
width: 700px;
border: 2px solid red;
}
here you can find A Plunker I made which initializes a map without a directive.
Hope I've been helpful.
这篇关于如何在不使用任何指令的情况下以角度初始化Google Maps API？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
