आईफोन स्क्रॉल व्यवहार

Question

ओवरराइड किए बिना पृष्ठ पर Google मानचित्र एम्बेड करें मैं मोबाइल के लिए साइट को अनुकूलित करने पर काम कर रहा हूं। हमारे पास एक स्थान पृष्ठ है जिसमें Google मानचित्र API के माध्यम से किसी स्थान और स्थान का मानचित्र शामिल है। (v2 - मुझे पता है कि इसे बहिष्कृत किया गया है, लेकिन मैंने अपग्रेड करने का समय उचित नहीं ठहराया है, "यदि यह तोड़ा नहीं गया है ..") मैं मूल जानकारी के साथ एक कॉलम लेआउट का उपयोग करना चाहता हूं जिसके बाद नक्शे के बाद अधिक जानकारी प्राप्त होती है।

अब जब मैं मानचित्र पर पहुंचने के बाद, आईफोन पर मोबाइल पेज को स्क्रॉल करने के लिए अपनी उंगली का उपयोग करता हूं, तो पेज स्क्रॉलिंग ओवरराइड हो जाती है और नक्शा पैनिंग शुरू होता है। पृष्ठ के आगे स्क्रॉल करने का एकमात्र तरीका यह है कि ऐसी जगह उपलब्ध है, मेरी उंगली को मानचित्र के ऊपर या नीचे रखना है। यदि मैं नक्शा खींचने को अक्षम करता हूं, तो जब मैं नीचे स्क्रॉल करना शुरू करता हूं और मानचित्र पर जाता हूं तो यह पैन नहीं होता है लेकिन पृष्ठ या तो स्क्रॉल नहीं करता है। मैं मानचित्र को एक स्थिर छवि के रूप में देखना चाहता हूं जिसे मैं अतीत स्क्रॉल कर सकता हूं, लेकिन फिर भी ज़ूम बटनों को अनुमति देता हूं और मानचित्र को कोड किए गए एक चुनिंदा फ़ील्ड के माध्यम से दिशाओं के साथ फिर से खींचा जा सकता है, इसलिए literal static image कोई समाधान नहीं है।

मुझे this post that required similar functionality मिला, लेकिन यह v3 का उपयोग कर रहा है। मुझे लगता है कि मुझे बस इतना करना है कि "नक्शा कंटेनर में टच इवेंट जोड़ें", लेकिन मैं जावास्क्रिप्ट के उस हिस्से से परिचित नहीं हूं, और जो नीचे है वह सामान्य स्क्रॉलिंग की अनुमति नहीं देता है। क्या मुझे v3 पर बुलेट काटने की ज़रूरत है, या क्या मेरे पास टच इवेंट जोड़ने पर एक बग है जिसके पास एक सरल जावास्क्रिप्ट सुधार है जो मैं चाहता हूं?

function initialize() { 
    if (GBrowserIsCompatible()) { 
    map = new GMap2(document.getElementById("map_canvas")); 
    geocoder = new GClientGeocoder(); 
    } 
} 

function showAddress(address, zoom) { 
//clipped... this part works fine 
} 

//These three lines create a map that my finger pans 
initialize(); 
showAddress("[clipped.. street, zip code]"); 
map.addControl(new GSmallZoomControl3D()); 

//This stops the map pan but still prevents normal page finger scrolling 
map.disableDragging(); 

//If done right could this allow normal page finger scrolling?? 
var dragFlag = false; 
map.addEventListener("touchstart", function(e){ 
    dragFlag = true; 
    start = (events == "touch") ? e.touches[0].pageY : e.clientY; 
},true); 
map.addEventListener("touchend", function(){ 
dragFlag = false; 
}, true); 
map.addEventListener("touchmove",function(
if (!dragFlag) return; 
end = (events == "touch") ? e.touches[0].pageY : e.clientY; 
window.scrollBy(0,(start - end)); 
}, true); 

मैं भी कोई लाभ नहीं हुआ document.getElementById("map_canvas").addEventListener या document.addEventListener साथ map.addEventListener की जगह की कोशिश की है।

Answer 1

मैंने इसे v3 में अपग्रेड करके हल किया और फिर उपरोक्त समाधान से कोड के उपयोग में मूल जावास्क्रिप्ट त्रुटि का पता लगाया। कुंजी

start = (events == "touch") ? e.touches[0].pageY : e.clientY; 

था उपयोगकर्ता प्रस्तुत कोड के बाहर चर घटनाओं की स्थापना कहीं रहा होगा, क्योंकि यह लग रहा है मिलान काम की तरह स्पर्श घटनाओं के लिए है और बाकी काम महत्वपूर्ण घटनाओं के लिए है। लेकिन चूंकि मेरे पास इवेंट वैरिएबल नहीं था, इसलिए यह गलत असाइनमेंट के लिए डिफ़ॉल्ट था। मैंने बस अपना start = e.touches[0].pageY बदल दिया (और टचेंड इवेंट के लिए भी ऐसा ही किया) और अब सबकुछ काम करता है।

हालांकि, मैंने यह देखने के लिए v2 पर वापस स्विच किया कि यह उस जावास्क्रिप्ट त्रुटि के साथ काम करेगा या नहीं। तो ऐसा लगता है कि मैंने किसी भी समय v3 को अपग्रेड नहीं किया, न तो इस विशिष्ट समाधान को समझने और न ही भविष्य में संगतता के लिए खुद को स्थापित करने में।

निष्कर्ष में, यदि आप मोबाइल पेज पर Google मानचित्र को एम्बेड करना चाहते हैं और इसे पीछे स्क्रॉल करने में सक्षम होना चाहते हैं, तो आपको एपीआई v3, ड्रैगिंग अक्षम करने और स्पर्श ईवेंट जोड़ने की आवश्यकता है। मैं भी मेरे कोड को कुछ मामूली सुधार किया है, यहाँ किसी भी जो भविष्य में लाभ हो सकता है के लिए प्रस्तुत किया:

function initialize() 
{ 
    geocoder = new google.maps.Geocoder(); 
    var myOptions = { 
     mapTypeId: google.maps.MapTypeId.ROADMAP    
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

function showAddress(address, zoom) 
{ 
    if (geocoder) 
    { 
     geocoder.geocode({ 'address': address }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      map.setOptions({ zoom: zoom }); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 
     } 
     }); 
    } 
} 

initialize(); 
showAddress("'.$geocode_address.'"); 

map.setOptions({ draggable: false }); 

var dragFlag = false; 
var start = 0, end = 0; 

function thisTouchStart(e) 
{ 
    dragFlag = true; 
    start = e.touches[0].pageY; 
} 

function thisTouchEnd() 
{ 
    dragFlag = false; 
} 

function thisTouchMove(e) 
{ 
    if (!dragFlag) return; 
    end = e.touches[0].pageY; 
    window.scrollBy(0,(start - end)); 
} 

document.getElementById("map_canvas").addEventListener("touchstart", thisTouchStart, true); 
document.getElementById("map_canvas").addEventListener("touchend", thisTouchEnd, true); 
document.getElementById("map_canvas").addEventListener("touchmove", thisTouchMove, true);