不工作的谷歌地图fitBounds [英] Google map fitBounds not working
本文介绍了不工作的谷歌地图fitBounds的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建使用谷歌地图angularjs指令一趟视图。除了谷歌地图fitbound到经纬度集合一切工作正常。
我已经尝试了所有使用fitbounds方法的方式，但失败了。
谢谢，
下面是我的code的努力。
指令：
＆LT; DIV CLASS =跳闸谷歌地图行程映射=的azazaz =2纬度=22.998673经度=72.514346＆GT;＆LT; / DIV＆GT;
指令code：
app.directive（'tripMap'，函数（$编译）{
返回{
控制器：函数（$范围，$位置，地图服务）{
this.registerMap =功能（MYMAP）{
mapService.setTripMap（MYMAP）; };
}，
链接：功能（范围，ELEM，ATTRS，CTRL）{
VAR的MapOptions，
纬度，
经度，
mapStyles，
地图;
纬度= attrs.latitude;
经度= attrs.longitude;
mapStyles =
[
{
类型特征：水，
元素类型：几何，
造型器：[
{
色：＃a2daf2
}
]
}，
{
类型特征：landscape.man_made，
元素类型：几何，
造型器：[
{
色：＃f7f1df
}
]
}，
{
类型特征：landscape.natural，
元素类型：几何，
造型器：[
{
色：＃d0e3b4
}
]
}，
{
类型特征：landscape.natural.terrain，
元素类型：几何，
造型器：[
{
可见性：上
}
]
}，
{
类型特征：poi.park，
元素类型：几何，
造型器：[
{
色：＃bde6ab
}
]
}，
{
类型特征：POI，
元素类型：标签，
造型器：[
{
可见性：上
}
]
}，
{
类型特征：poi.medical，
元素类型：几何，
造型器：[
{
色：＃fbd3da
}
]
}，
{
类型特征：poi.business，
元素类型：全部，
造型器：[
{
可见性：上
}
]
}，
{
类型特征：路，
的ElementType：geometry.stroke，
造型器：[
{
可见性：上
}
]
}，
{
类型特征：路，
元素类型：标签，
造型器：[
{
可见性：上
}
]
}，
{
类型特征：road.highway，
的ElementType：geometry.fill，
造型器：[
{
色：＃ffe15f
}
]
}，
{
类型特征：road.highway，
的ElementType：geometry.stroke，
造型器：[
{
色：＃efd151
}
]
}，
{
类型特征：road.arterial，
的ElementType：geometry.fill，
造型器：[
{
色：#FFFFFF
}
]
}，
{
类型特征：road.local，
的ElementType：geometry.fill，
造型器：[
{
色：黑
}
]
}，
{
类型特征：transit.station.airport，
的ElementType：geometry.fill，
造型器：[
{
色：＃cfb2db
}
]
}
]; 的MapOptions = {
变焦：12，
disableDefaultUI：真实， 中心：新google.maps.LatLng（纬度，经度） mapTypeId设为：google.maps.MapTypeId.ROADMAP，
款式：mapStyles，
MapTypeControl中：真实， mapTypeControlOptions中：{
风格：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，
位置：google.maps.ControlPosition.BOTTOM_CENTER
}，
panControl：真实，
PanControlOptions，以{
位置：google.maps.ControlPosition.LEFT_CENTER
}，
zoomControl，用于：真实，
ZoomControlOptions来：{
风格：google.maps.ZoomControlStyle.LARGE，
位置：google.maps.ControlPosition.LEFT_CENTER
}，
scaleControl：真实，
将streetViewControl：真实，
streetViewControlOptions：{
位置：google.maps.ControlPosition.LEFT_CENTER
}，
};
/ *
VAR的MapOptions = {
mapTypeId设为：google.maps.MapTypeId.ROADMAP，
MapTypeControl中：假的
};
* /
//google.maps.visualRefresh = TRUE;
变种地图=新google.maps.Map（ELEM [0]，的MapOptions）;
ctrl.registerMap（地图）;
scope.InitializeTripdetailController（）; 范围。$应用（函数（）{
window.setTimeout（函数（）{
google.maps.event.trigger（地图，调整）;
}，100）;
}）;
} };
}）;
控制器code：
app.controller（'tripdetailController'，['$范围，$ rootScope'，'$超时，地图服务，ngDialog'，函数（$范围，$ rootScope，$超时，地图服务，ngDialog）{
$ scope.tripPathPolylines = [];
VAR车次= [];
VAR insertTripLatlng =功能（旅）{
VAR isExists = FALSE;
对（车次中VAR V）{
如果（TRIPS [V] .hash == trip.hash）{
isExists =真
打破;
}
}
如果（isExists == FALSE）{
trips.push（旅）;
}
}
功能settrip（）{
VAR标记;
变种tripmap = mapService.getTripMap（）;
VAR边界=新的google.maps.LatLngBounds（）;
对于（VAR J = 0; J＆LT; trips.length; J ++）{
VAR ltlng =新google.maps.LatLng（游[J] .lat，车次[J] .lng）;
bounds.extend（ltlng）; 标记=新google.maps.Marker（{
位置：ltlng，
图：tripmap
}）; }
tripmap.fitBounds（边界）;
}
$ scope.InitializeTripdetailController =功能（）{
VAR tripData = $ $范围parent.ngDialogData。
为（变量p值= 0; P＆下; tripData.messages.length，P ++）{
insertTripLatlng（{纬度：tripData.messages [P] .trackPoint.pos.lat，LNG：tripData.messages [P] .trackPoint.pos.lng，哈希：tripData.messages [P] .trackPoint.pos.lat + - + tripData.messages [p] .trackPoint.pos.lng}）
}
settrip（）;
}
}]）;
FitBounds code：
VAR tripmap = mapService.getTripMap（）;
VAR边界=新的google.maps.LatLngBounds（）;
对于（VAR J = 0; J＆LT; trips.length; J ++）{
VAR ltlng =新google.maps.LatLng（游[J] .lat，车次[J] .lng）;
bounds.extend（ltlng）;
标记=新google.maps.Marker（{位置：ltlng，地图：tripmap}）;
}
tripmap.fitBounds（边界）;
的地图看起来像
这应该是fitbounds为后：
更新：CSS在地图
更新：地图加载中ngDialog弹出
。 .trip - 谷歌地图{
宽度：100％;
高度：450像素;
}
解决方案
这是由于地图是由ngDialog弹出指令调整。
按呼叫fitbounds在地图大小调整回调解决同为
$范围。$应用（函数（）{
window.setTimeout（函数（）{
google.maps.event.trigger（tripmap，调整）;
tripmap.fitBounds（边界）;
}，100）;
}）;
谢谢大家的帮助。
I am creating a trip view using google map with angularjs directive. All works fine except the google map fitbound to a latitude longitude collection. I have tried all the way to use the fitbounds methods but failed.
Thanks,
Below is my code efforts.
Directive:
<div class="trip-google-map" trip-map="" mapid="2" latitude="22.998673" longitude="72.514346"></div>
Directive Code:
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 Code:
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 Code:
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);
The map looks like:
It should be after fitbounds as:
Update: css for map:
Update: The map is loaded in ngDialog popup.
.trip-google-map {
width: 100%;
height: 450px;
}
解决方案
It was due to map is resized by ngDialog popup directive.
Solved by call fitbounds in map resize callback with as
$scope.$apply(function () {
window.setTimeout(function () {
google.maps.event.trigger(tripmap, 'resize');
tripmap.fitBounds(bounds);
}, 100);
});
Thanks all for help.
这篇关于不工作的谷歌地图fitBounds的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
