У меня есть мобильная веб-страница, на которой клиент может ввести свой почтовый индекс с помощью отправки формы или всплывающего окна с текущим местоположением, а затем найти центры, которые находятся поблизости.Ответ включает в себя список этих центров, а также вкладку карт Google с указанием их местоположения и штифты, указывающие центры, указанные в списке.
Проблема в том, что карта занимает много места на странице.Его трудно прокрутить вниз до списка чуть ниже карты.
Я бы хотел отключить функцию панорамирования на Картах Google, чтобы люди могли касаться карты и прокручивать вверх и вниз по странице.Однако я не хочу полностью подавлять все сенсорные события на карте, потому что я все еще хочу, чтобы люди могли нажимать на булавки и просматривать всплывающее информационное окно, которое сопровождает эти маркеры.Hense, почему я думал, что реализация статического изображения может не подходить.
Вот ссылка на страницу:
http://cs.sandbox.millennialmedia.com/~tkirchner/sites/K/kumon/zip_page.php
Я все еще относительно новв Google API, так что я уверен, что есть какой-то параметр или прослушиватель событий, который мне нужно настроить, и я пока не могу найти его в документации.
Буду признателен за любую помощь или ссылки.
function setMap(map) {
if ( typeof googleMap != 'undefined' && !changeFlag ) return;
var current = new google.maps.LatLng( f.current.latitude,
f.current.longitude );
var dragFlag = false;
var start = 0, end = 0, windowPos = 0;
zoom = zoom == 0 ? bestZoom() : zoom;
map.html('');
var mapArgs = {
zoom : zoom,
center : current,
mapTypeId : google.maps.MapTypeId.ROADMAP,
backgroundColor : '#FFFFFF',
mapTypeControl : false,
};
if ( !config.panning ) mapArgs['draggable'] = false;
googleMap = new google.maps.Map(map.get(0), mapArgs);
new google.maps.Marker({
position : current,
map : googleMap,
title : 'You Are Here',
icon : 'youarehere.png'
});
movement = 0;
if ( !config.panning && events == 'touch' ) {
map.get(0).addEventListener('touchstart', function(e){
dragFlag = true;
start = events == 'touch' ? e.touches[0].pageY : e.clientY;
},true);
map.get(0).addEventListener('touchend', function(){
dragFlag = false;
}, true);
map.get(0).addEventListener('touchmove',function(e){
if ( !dragFlag ) return;
end = events == 'touch' ? e.touches[0].pageY : e.clientY;
window.scrollBy( 0,( start - end ) );
}, true);
}
for( var i in f.locations ) {
var location = new google.maps.LatLng( f.locations[i].latitude,
f.locations[i].longitude );
var args = {
position : location,
map : googleMap,
};
var marker = new google.maps.Marker(args);
var infoBox = config.infoBox;
var msg = config.infoBox;
for( var x in propertyList ) {
var myExp = new RegExp('{{'+propertyList[x]+'}}');
if( myExp.test(msg) && typeof(f.locations[i][propertyList[x]]) != 'undefined' && f.locations[i][propertyList[x]] != "" )
msg = msg.split('{{'+propertyList[x]+'}}').join(f.locations[i][propertyList[x]]);
else if( myExp.test(msg) )
msg = msg.split('{{'+propertyList[x]+'}}').join('');
}
setMessage(marker,msg);
}
}
function setMessage(marker, msg) {
var infoWindow = new google.maps.InfoWindow({ content : msg });
google.maps.event.addListener(marker,'click',function(){
if ( openBoxes.length > 0 )
openBoxes.pop().close();
infoWindow.open(googleMap,marker);
openBoxes.push( infoWindow );
});
}
ОБНОВЛЕНИЕ: Ну, я понял, что если я установил draggable: false, это препятствует панорамированию карты.Теперь я могу понять, как заставить страницу прокручиваться, когда я касаюсь и перетаскиваю карту, и все будет хорошо.
ОБНОВЛЕНИЕ: Понятно!Я прикрепил сенсорные события к контейнеру карты Google "map", и это сработало!
ОБНОВЛЕНИЕ: На самом деле, я все еще не хватает.Это работает на моем рабочем столе, но не на моем iPhone.Это позволяет мне хорошо прокручивать вверх и вниз, но я не могу нажать ни на один из маркеров.На моем рабочем столе это прекрасно работает.Страница прокручивается вверх и вниз, и я могу нажимать на свои значки.Я заметил, что событие нажатия на значки маркеров, похоже, не срабатывает.Что-то должно этому помешать.