javascript - romanos - teselaciones regulares
Google Maps no actualiza las teselas mientras arrastra (8)
¿Has intentado usar arrastre?
google.maps.event.addDomListener( map, ''drag'', function(e) {
//Code that runs consistantly everytime the user drags the map
//load map tiles if not loaded yet
});
No tengo experiencia en la codificación de la versión de Android, pero ¿podría ser un paso en la dirección correcta?
Tengo que usar google maps javascript api en una vista web. El problema es que al arrastrar el mapa no se cargarán las teselas faltantes. En un navegador en mi PC de escritorio no puedo obtener el mismo comportamiento sino cargar las teselas mientras arrastro el mapa. En la imagen sostengo el mapa y no pasa nada hasta que suelte el dedo.
Encontré un problema (que no se ajustaba perfectamente a mi problema, pero estaba un poco cerca) en el bugtracker de gmaps y probé todas las soluciones mencionadas: https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
Esto es lo que he intentado hasta ahora:
// Setting the maps div container to a fixed size
#map-canvas {
height: 600px;
width: 600px;
}
// Emit resize trigger on mouse move
$(document).ready(function () {
$("#map-canvas").mousemove(function (event) {
setTimeout(function () {
google.maps.event.trigger(map,''resize'');
map.setZoom(map.getZoom());
}, 100);
});
});
// loading Google Maps API after document has been loaded
function loadScript() {
var script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = ''https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&'' +
''callback=initialize'';
document.body.appendChild(script);
}
window.onload = loadScript;
El código funciona y el evento mousemove se activa. Estoy usando android: minSdkVersion = "19" en mi dispositivo nexus 10.
¿Podría quizás almacenar un mapa más grande y solo mostrar una porción en la ventana gráfica? EG carga el mapa en una div 1200x1200 dentro de la 600x600, con desbordamiento: oculto?
// Crear una Div como ''map_canvas''
var htmldesign = ''<table><tr><td>India</td></tr></table>'';
var locationdetails = ''India'';
var popdetail = ''India'';
var zoomper = 5;
GetLocation(locationdetails, popdetail, zoomper);
function GetLocation(address, popdetail, zoomper) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ ''address'': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
initialize(latitude, longitude, popdetail, zoomper);
} else {
initialize(21.0000, 78.8718, ''India'', zoomper);
}
});
};
function initialize(lat, lon, popdetail, zoom) {
var myLatlng = new google.maps.LatLng(lat, lon) // This is used to center the map to show our markers
var mapOptions;
mapOptions = {
center: myLatlng,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
marker: true
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
animation: google.maps.Animation.BOUNCE,
position: myLatlng
});
if (popdetail != ''India'') {
popdetail = ''<div style="font-size:small;font-family:@Arial Unicode MS;border-radius: 6px;" class="phoneytext"> '' + popdetail + ''</div>'';
infoBubble = new InfoBubble({
map: map,
content: popdetail,
position: new google.maps.LatLng(lat, lon),
shadowStyle: 1,
padding: 10,
backgroundColor: ''#E6E6E6'',
borderRadius: 6,
arrowSize: 30,
borderWidth: 1,
borderColor: ''#2c2c2c'',
disableAutoPan: false,
hideCloseButton: true,
arrowPosition: 10,
backgroundClassName: ''phoney'',
arrowStyle: 2
});
marker.setMap(map);
infoBubble.open(map, marker);
}
else {
marker.setMap(map);
}
}
</script>
He respondido esto antes. echa un vistazo a este jsfiddle
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById(''map_canvas'');
var map_options = {
center: new google.maps.LatLng(51.372658, 1.354386),
zoom:16,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
<style>
#map_canvas {
width: 500px;
height:400px;
border:1px solid #888888;
margin-bottom:20px;
box-shadow: 2px 2px 2px #888888;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
</body>
Deberá cambiar aquí la longitud y la latitud de su ubicación. Puedes obtener esto de google maps. la parte para cambiar es "new google.maps.LatLng (51.372658, 1.354386)"
Intente esto ... Este problema aumenta solo cuando se cambia el tamaño del mapa.
google.maps.event.addDomListener( map, ''drag'', function(e) {
google.maps.event.trigger(map,''resize'');
map.setZoom(map.getZoom());
});
Tengo el mismo problema de no centrar y muestra solo una parte del mapa en el lienzo del mapa.
Esta línea solucionó mi problema:
google.maps.event.trigger(map, ''resize'');
No debería map.initialize(); cuando mouseover , necesita tener esta línea después de map.initialize(); y luego configure setCenter y setZoom
map.setCenter(myLatlng);
map.setZoom(10);
el evento táctil difiere de los eventos del mouse, puede usar enlaces de eventos táctiles como inicio táctil, toque final, etc. o intente utilizar hammer.js
intenta esto, funciona
google.maps.event.addListenerOnce(map, ''tilesloaded'', function () {
google.maps.event.addListenerOnce(map, ''tilesloaded'', function () {
google.maps.event.trigger(map, ''resize'');
});
});