【发布时间】：2014-12-24 10:46:44
【问题描述】：
我正在使用带有 angularjs 指令的谷歌地图创建旅行视图。除了谷歌地图适合经纬度集合外，一切正常。 我一直尝试使用 fitbounds 方法，但失败了。
谢谢，
以下是我的代码工作。
指令：
<div class="trip-google-map" trip-map="" mapid="2" latitude="22.998673" longitude="72.514346"></div>
指令代码：
app.directive('tripMap', function ($compile) {
return {
controller: function ($scope, $location, mapService) {
this.registerMap = function (myMap) {
mapService.setTripMap(myMap);
};
},
link: function (scope, elem, attrs, ctrl) {
var mapOptions,
latitude,
longitude,
mapStyles,
map;
latitude = attrs.latitude;
longitude = attrs.longitude;
mapStyles =
[
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#a2daf2"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [
{
"color": "#f7f1df"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [
{
"color": "#d0e3b4"
}
]
},
{
"featureType": "landscape.natural.terrain",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#bde6ab"
}
]
},
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.medical",
"elementType": "geometry",
"stylers": [
{
"color": "#fbd3da"
}
]
},
{
"featureType": "poi.business",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffe15f"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#efd151"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"color": "black"
}
]
},
{
"featureType": "transit.station.airport",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#cfb2db"
}
]
}
];
mapOptions = {
zoom: 12,
disableDefaultUI: true,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: mapStyles,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
};
/*
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
*/
//google.maps.visualRefresh = true;
var map = new google.maps.Map(elem[0], mapOptions);
ctrl.registerMap(map);
scope.InitializeTripdetailController();
scope.$apply(function () {
window.setTimeout(function () {
google.maps.event.trigger(map, 'resize');
}, 100);
});
}
};
});
控制器代码：
app.controller('tripdetailController', ['$scope', '$rootScope', '$timeout', 'mapService', 'ngDialog', function ($scope, $rootScope, $timeout, mapService, ngDialog) {
$scope.tripPathPolylines = [];
var trips = [];
var insertTripLatlng = function (trip) {
var isExists = false;
for (var v in trips) {
if (trips[v].hash == trip.hash) {
isExists = true
break;
}
}
if (isExists == false) {
trips.push(trip);
}
}
function settrip() {
var marker;
var tripmap = mapService.getTripMap();
var bounds = new google.maps.LatLngBounds();
for (var j = 0; j < trips.length; j++) {
var ltlng = new google.maps.LatLng(trips[j].lat, trips[j].lng);
bounds.extend(ltlng);
marker = new google.maps.Marker({
position: ltlng,
map: tripmap
});
}
tripmap.fitBounds(bounds);
}
$scope.InitializeTripdetailController = function () {
var tripData = $scope.$parent.ngDialogData;
for (var p = 0; p < tripData.messages.length; p++) {
insertTripLatlng({ lat: tripData.messages[p].trackPoint.pos.lat, lng: tripData.messages[p].trackPoint.pos.lng, hash: tripData.messages[p].trackPoint.pos.lat + "-" + tripData.messages[p].trackPoint.pos.lng })
}
settrip();
}
}]);
FitBounds 代码：
var tripmap = mapService.getTripMap();
var bounds = new google.maps.LatLngBounds();
for (var j = 0; j < trips.length; j++) {
var ltlng = new google.maps.LatLng(trips[j].lat, trips[j].lng);
bounds.extend(ltlng);
marker = new google.maps.Marker({position: ltlng,map: tripmap});
}
tripmap.fitBounds(bounds);
地图看起来像：
应该在 fitbounds 之后为：
更新：地图的 css：
更新：地图在 ngDialog 弹出窗口中加载。
.trip-google-map {
width: 100%;
height: 450px;
}
【问题讨论】：
-
删除地图的调整大小触发器时是否也会发生这种情况？
-
感谢@Dr.Molle 是的，调整大小触发后，地图加载速度更快。但 fitbounds 不起作用。
-
当您调用
fitBounds时，地图似乎没有大小。地图的大小会以任何方式以编程方式修改吗？ -
我使用的是 css 中的尺寸（更新上面的 css 代码）。可能是由于尺寸宽度的百分比问题？
-
我猜当你调用
fitBounds时地图是隐藏的。我对angularjs不熟悉，但是ngDialog有一个opened-event，尝试调用fitBounds当此事件触发时。
标签： angularjs google-maps angularjs-directive