Mapa cortado cuando cambio la orientación del celular.
mauricioLopezRamirez opened this issue · comments
Hi @mauricioLopezRamirez. Unfortunately I understand Spanish only with Google translate. But I hope that you understand English. Add orientation cordova plugin. Subscribe to orientation change event and recreate map. Like this (I haven't tested):
screen.orientation.addEventListener('change', function(){ Mapbox.hide(); Mapbox.show(yourOptions); });
@risinghero gracias por tu respuesta, lo e hecho sin plugin, solo utilice javascript lo cual detecta el cambio de orientación pero no ha funcionado el siguiente código. Que otra opción propones:
window.addEventListener("orientationchange", function() {
Mapbox.hide();
showMap();
});
@mauricioLopezRamirez please check with debugger that event "orientationchange" works. There can be some problems with it.
@risinghero si funciona, e puesto un alert para que me verifique que si se cambio de orientación y si cambia.
@mauricioLopezRamirez to further help you I need simple example reproducing this issue. Can you create one? Just Map+subscription to event so i can test it on my pc.
ok @risinghero este es mi codigo del index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="cordova.js"></script>
</head>
<body onload="onLoad()">
<script>
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
showMap();
}
var zoom = 12;
function setTilt() {
Mapbox.setTilt({
pitch: 45,
duration: 4500
});
}
window.addEventListener("orientationchange", function() {
Mapbox.hide();
showMap();
});
function showMap() {
Mapbox.show({
style: 'emerald',
margins: {
'left': 0,
'right': 0,
'top': 0,
'bottom': 0
},
center: {
lat: 3.4210196,
lng: -76.5201787
},
zoomLevel: zoom, // 0 (the entire world) to 20, default 10
showUserLocation: true, // default false
hideAttribution: true, // default false
hideLogo: true, // default false
hideCompass: false, // default false
disableRotation: false, // default false
disableScroll: false, // default false
disableTilt: false, // default false
disableZoom: false, // default false
disablePitch: false, // default false
markers: [
{
'lat': 3.4356455,
'lng': -76.5281464,
'title': 'CALLE 13 CON CARRERA 23',
'subtitle': 'Sentido: SUR-NORTE\nZona: CENTRO'
}
]
},
function (result) {
console.log(JSON.stringify(result));
// let's add a callback for these markers - invoked when the callout is tapped (Android) or the (i) icon in the marker callout (iOS)
Mapbox.addMarkerCallback(function (selectedMarker) {
// alert("Marker selected: " + JSON.stringify(selectedMarker));
});
// let's add callbacks for region changing
//
// - invoked when the map is about to moved (animated or not).
Mapbox.onRegionWillChange(function(centerCoordinates) {
console.log("Map will move from: ", centerCoordinates);
});
// - invoked at each tick (so 60 per second) when the map moves. So don't do any heavy computing here.
Mapbox.onRegionIsChanging(function(centerCoordinates){
console.log("New map center is: ", centerCoordinates);
});
// - invoked after the map has moved (animated or not).
Mapbox.onRegionDidChange(function(centerCoordinates) {
console.log("Map as finished to move to : ", centerCoordinates);
});
},
function (error) {
alert(error);
}
)
}
</script>
</body>
</html>