我正在尝试从函数初始化谷歌地图初始化函数,该函数的工作原理是添加一个新的 div
标签,其中将包含 map 。
我尝试在函数内部下面的注释区域中编写代码,但它不起作用,但它在函数外部工作。
app.controller('controller1', function($scope, $http, $window) {
$scope.addMapPanel = function() {
var ref_div = angular.element(document.querySelector('#ref_div'));
var map_div = angular.element(document.querySelector('#map_div'));
if(map_div.length){
console.log('exist');
}else{
console.log('doesnot');
ref_div.append('<div class="col-md-6" id="map_div"></div>');
}
/*$scope.initialize = function() {
var map = new google.maps.Map(document.getElementById('map_div'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', $scope.initialize);*/
};
});
最佳答案
加载该库后,您仍然需要让 DomListener
调用某个函数。从那里,只需检查 div 是否存在。如果没有,您需要附加它,然后初始化一个 map 到该 div 上。
但是,我建议使用 directives
进行 DOM 交互,因为 View 逻辑应该存在于 MVC 架构中。另外,它还允许重复使用。
angular.module('app', []).
controller('mapController', function($scope) {
$scope.initialize = function () {
var ref_div = angular.element(document.querySelector('#ref_div'));
var map_div = angular.element(document.querySelector('#map_div'));
if(map_div.length){
var map = new google.maps.Map(document.getElementById('map_div'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}else{
ref_div.append('<div class="col-md-6" id="map_div"></div>');
var map = new google.maps.Map(document.getElementById('map_div'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
};
google.maps.event.addDomListener(window, 'load', $scope.initialize);
});
#map_div {
width: 150px;
height: 150px;
}
<div id="ref_div" ng-app="app" ng-controller="mapController">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js">
</script>
关于javascript - 在 angularjs 函数中初始化谷歌地图 api,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42988858/