0
我在angularJS中使用Google Maps API。我在地图上有多个位置。 现在我试图在地图中心查看标记,但不知道我在哪里缺乏重点。将Google Maps API与AngularJS一起使用,地图不会显示在中心
下面是代码:
$scope.mapOptions = {
zoom: 2,
center: new google.maps.LatLng(29.3139962480007,47.9858316415248),
mapTypeId: google.maps.MapTypeId.TERRAIN,
styles:$scope.styles
}
$scope.map = new google.maps.Map(document.getElementById('modelmap'), $scope.mapOptions);
var infoWindow = new google.maps.InfoWindow();
$scope.markers = [];
$scope.infowindow = new google.maps.InfoWindow({
content: '',
maxWidth: 250
});
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.latitude, info.longitude),
title: info.address,
icon: '/assets/Maps-Pin-Place-icon.png'
});
var content=' <div class="wwone__map-infobox__inner scrollFix"> <img class="wwone__map-infobox__thumb" src="'+images+'"/> <div class="wwone__map-infobox__inner__heading">'+title+'</div><div class="wwone__map-infobox__inner__info">'+description+'<div class="wwone__map-infobox__inner__info__location"><strong>Address:</strong>'+info.address+'</div></div><a class="wwone__map-infobox__inner__btn btn" data-toggle="modal" data-target="#myModal" ng-click="openBrnach('+info.id+')">Find out more</a></div> '
var compiledContent = $compile(content)($scope)
google.maps.event.addListener(marker, 'click', (function(marker, content, scope) {
return function() {
scope.infowindow.setContent(content);
scope.infowindow.open(scope.map, marker);
};
})(marker, compiledContent[0], $scope));
$scope.markers.push(marker);
}
for (i = 0; i < data.length; i++){
createMarker(data[i]);
}
请帮帮忙!
当您点击标记时,您是否希望将地图居中?或者当你绘制所有的标记时,你是否期望地图居中,这样你就可以看到它们了? – duncan
Hi Ducan,我想让地图居中,这样我们就可以看到它们全部 –
您需要的是有一个LatLngBounds对象。在添加每个标记时,请使用该标记的位置来扩展边界。添加完所有标记后,请在地图上调用fitBounds。 – duncan