我正在使用带有 angularjs 指令的谷歌地图创建旅行 View 。除了谷歌地图适合纬度经度集合之外，一切正常。 我已经尝试了所有方法使用 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);
});
}
};
});
Controller 代码:
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);
map 看起来像:
它应该在 fitbounds 之后:
更新: map CSS:
更新: map 已加载到 ngDialog 弹出窗口中。
.trip-google-map {
width: 100%;
height: 450px;
}
最佳答案
这是由于 ngDialog 弹出指令调整了 map 大小。
通过在 map 调整大小回调中调用 fitbounds 来解决
$scope.$apply(function () {
window.setTimeout(function () {
google.maps.event.trigger(tripmap, 'resize');
tripmap.fitBounds(bounds);
}, 100);
});
感谢大家的帮助。
关于angularjs - 谷歌地图 fitBounds 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27635634/