在我的 Angular 应用程序中,我使用 ngMap 作为谷歌地图,并显示具有特定尺寸的 div(宽度:400px 和高度:300px)。现在,在某些情况下,我需要全屏显示 map 。有没有办法为此添加双击或按钮或其他东西?
<div id="map"></div>
<script>
var lokacije = [];
id_maps = [];
for (key in data.smart_es) {
lokacije.push({
lat: data.smart_es[key].lat,
lng: data.smart_es[key].lng
});
}
$scope.lokacije = lokacije;
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(44.7007672, 15.4823411),
//mapTypeId: google.maps.MapTypeId.TERRAIN
styles: [{"featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{"color": "#444444"}]}, {"featureType": "landscape", "elementType": "all", "stylers": [{"color": "#f2f2f2"}]}, {"featureType": "poi", "elementType": "all", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.business", "elementType": "geometry.fill", "stylers": [{"visibility": "on"}]}, {"featureType": "road", "elementType": "all", "stylers": [{"saturation": -100}, {"lightness": 45}]}, {"featureType": "road.highway", "elementType": "all", "stylers": [{"visibility": "simplified"}]}, {"featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{"visibility": "off"}]}, {"featureType": "transit", "elementType": "all", "stylers": [{"visibility": "on"}]}, {"featureType": "transit", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "water", "elementType": "all", "stylers": [{"color": "#b2d0e3"}, {"visibility": "on"}]}]
};
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
//marker cluster
//kraj marker cluster
var infoWindow = new google.maps.InfoWindow();
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var getSmartnchIcon = function (smartnch) {
if (smartnch.type == 'urban') {
return 'assets/img/marker_urban.png';
} else {
return 'assets/img/marker_standard.png';
}
};
var createMarker = function (info) {
selectednches = info;
var nchTypeIconUrl = getSmartnchIcon(info);
if(info.lat !== null && info.lng !== null){
$scope.latitude = info.lat;
$scope.longitude = info.lng;
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng($scope.latitude, $scope.longitude),
optimized: false,
title: info.city,
icon: ypeIconUrl,
id: info.id
});
}else{
$scope.latitude = 43.5450037;
$scope.longitude = 16.4615604;
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng($scope.latitude, $scope.longitude),
optimized: false,
title: info.city,
icon: ypeIconUrl,
id: info.id
});
}
marker.content = '<div class="info-box-wrap">'
+
'<img src="" ng-click="openLightboxModal($index)"/>'
+
'<div class="info-box-text-wrap">'
+
'<h6 class="address">'
+
info.id + ' - ' + info.type
+
'</h6>'
+
'<p class="price">'
+
info.desc + '<br>'
+
info.last_report + '<br>'
+
'</p>'
+
'</div>'
+
'<div class="action-btns">'
+
'</div>'
+
'</div>'
+
'</div>' + marker.content;
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent('<div class="iw-title" style="color: #000;">' + '</div>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
};
for (i = 0; i < lokacije.length; i++) {
createMarker(lokacije[i]);
}
$scope.openInfoWindow = function (e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
};
//marker clusterer
var options = {
imagePath: 'assets/img/i',
gridSize: 50,
maxZoom: 10
};
var markerCluster = new MarkerClusterer($scope.map, $scope.markers, options);
$scope.clearMarkers = function () {
for (var i = 0; i < $scope.markers.length; i++) {
$scope.markers[i].setMap(null);
}
$scope.markers.length = 0;
};
</script>
最佳答案
有一个全屏 api 您可以使用,请参阅 Fullscreen API
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
} }
关于javascript - 如何在AngularJS中全屏显示谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44130202/