过去一周,我一直在为一个简单的项目实现 Google 的 JavaScript map API。到目前为止,我一直在毫无问题地使用自动完成服务和 PlacesService。添加交互式 map 时,由于 map 的异步特性,我遇到了无法一直加载 map 的问题。我已经转而使用 angular-google-maps 插件。我没有使用 SDK 加载器,因为我觉得加载库两次是多余的,因为我已经为自动完成和 PlacesService 加载了它。我遵循了非常基本的示例,但 map 不会显示。我检查过的常见错误:
- 给 html、body 和 map div 一个高度。
- 确保在使用 Angular 模块和仔细检查 API key 之前加载库
- 使用 SDK 加载程序时也会发生同样的事情,所以我很确定这不是导致它的原因。自动完成和 PlacesService 工作,所以图书馆在这种情况下工作。
HTML:
<div class="col-xs-12 col-md-6">
<div class="row">
<div class="col-xs-12">
<div id="map" class="well">
<ui-gmap-google-map center="map.center"
zoom="map.zoom"
pan="true"
>
</ui-gmap-google-map>
</div>
</div>
</div>
</div>
Controller :
angular.module("app").controller("IndexCtrl", ["$scope", "$interval", "uiGmapGoogleMapApi", function($scope, $interval, uiGmapGoogleMapApi) {
var Autocomplete;
var PlacesService;
$(document).ready(function() {
Autocomplete = new google.maps.places.Autocomplete(document.getElementById("placeInput"), {});
PlacesService = new google.maps.places.PlacesService(document.getElementById("map"));
});
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = { center: { latitude: 0, longitude: 0 }, zoom: 2 };
$scope.googleVersion = maps.version;
maps.visualRefresh = true;
});
}]);
CSS:
.angular-google-map-container {
height: 400px;
}
.angular-google-map {
height: 400px;
}
最佳答案
太棒了。通过发布这个并仅发布罪魁祸首代码,我注意到我使用与 angular-google-maps 模块相同的 div 作为我的 PlacesService 的容器。通过更改此设置, map 渲染良好。
新 Controller :
angular.module("app").controller("IndexCtrl", ["$scope", "$interval", "uiGmapGoogleMapApi", function($scope, $interval, uiGmapGoogleMapApi) {
var Autocomplete;
var PlacesService;
$(document).ready(function() {
Autocomplete = new google.maps.places.Autocomplete(document.getElementById("placeInput"), {});
PlacesService = new google.maps.places.PlacesService(document.getElementById("placesContainer"));
});
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = { center: { latitude: 0, longitude: 0 }, zoom: 2 };
$scope.googleVersion = maps.version;
maps.visualRefresh = true;
});
}]);
新的 HTML:
<div class="col-xs-12 col-md-6">
<div class="row">
<div class="col-xs-12">
<div id="map"></div>
<div class="well">
<ui-gmap-google-map center="map.center"
zoom="map.zoom"
pan="true"
>
</ui-gmap-google-map>
</div>
</div>
</div>
</div>
关于javascript - Angular-google-maps 不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36654942/