2012-05-07 13 views
6

मैं एक मानचित्र के साथ एक पृष्ठ प्रोग्रामिंग कर रहा हूं जहां मुझे मानचित्र पर टैप/क्लिक के स्थान को कैप्चर करने और निर्देशांक स्टोर करने की आवश्यकता है। मैं ओपनलेयर जेएस का उपयोग कर रहा हूं। डेस्कटॉप ब्राउज़र (आईई/एफएफ/क्रोम) पर, यह ठीक काम कर रहा है। मोबाइल उपकरणों पर, टैप को डिफ़ॉल्ट एंड्रॉइड ब्राउज़र (वास्तविक उपकरणों और अनुकरणकर्ताओं दोनों में) पर सही ढंग से कैप्चर किया जा रहा है।ओपनलेयर अक्षांश वेबकिट मोबाइल ब्राउज़र में गलत तरीके से कब्जा कर लिया गया

हालांकि मोबाइल वेबकिट ब्राउज़र (आईफोन सफारी & एंड्रॉइड क्रोम बीटा) पर, हमें एक समस्या है जहां टैप को वास्तविक टैप के कुछ पिक्सल (उत्तर की तरफ) के लिए कैप्चर किया जा रहा है। त्रुटि तय हो गई है नहीं (हां, तो मैं सिर्फ घटना के xy 100 नहीं जोड़ सकते हैं शीर्ष recalibrate करने के लिए।)

यहाँ कोड मैं clickhandler के रूप में उपयोग कर रहा हूँ है:

OpenLayers.Control.ClickHandler = OpenLayers.Class(OpenLayers.Control, {     
    defaultHandlerOptions: { 
     'single': true, 
     'double': false, 
     'pixelTolerance': 0, 
     'stopSingle': false, 
     'stopDouble': false 
    }, 

    initialize: function(options) { 
     this.handlerOptions = OpenLayers.Util.extend(
      {}, this.defaultHandlerOptions 
     ); 
     OpenLayers.Control.prototype.initialize.apply(
      this, arguments 
     ); 
     this.handler = new OpenLayers.Handler.Click(
      this, { 
       'click': this.trigger 
      }, this.handlerOptions 
     ); 
    }, 

    trigger: function(e) { 
     that.inputLonLat_EPSG4326 = null; 

     var lonlat = that.inputMap.getLonLatFromViewPortPx(e.xy); 

     that.logMessage("XY " + e.xy); 
     that.logMessage("LonLoat " + lonlat); 

     that.inputMarkers.clearMarkers(); 


    that.inputMarkers.addMarker(new OpenLayers.Marker(lonlat,that.icons["green"].clone())); 

    lonlat.transform(that.inputMap.getProjectionObject(), new OpenLayers.Projection("EPSG:4326")); 

    that.inputLonLat_EPSG4326 = lonlat; 
    // For the moderation sections 
    $('#alertLatitude').val(that.inputLonLat_EPSG4326.lat); 
    $('#alertLongitude').val(that.inputLonLat_EPSG4326.lon); 

    //lonLat2.transform(that.inputMap.getProjectionObject(), new OpenLayers.Projection("EPSG:4326")); 
    that.logMessage("Stored lat " + that.inputLonLat_EPSG4326.lat); 
    that.logMessage("Stored lon " + that.inputLonLat_EPSG4326.lon);  

    that.callFunction(that.inputMapListener, e); 
    } 
}); 

मैं होना चाहिए कुछ अलग कर रहे हो? क्या किसी और ने ओपनलेयर का उपयोग करते समय मोबाइल वेबकिट ब्राउज़र पर गलत समस्या देखी है?

उत्तर

1

मुझे अंततः यह कारण हो रहा है। ऐसा लगता है कि वेबकिट मोबाइल ब्राउज़र पर, x, y जो लाइब्रेरी प्राप्त हो रहा है (या व्युत्पन्न) पृष्ठ पर आधारित है, न कि उस तत्व पर जिस पर नक्शा रखा गया है। इसलिए गणना बंद हैं। ऐसा लगता है कि नक्शा तत्व के एक्सई या कुछ ऐसे डीओएम-आधारित आंकड़े को जोड़कर गलतता को हल नहीं किया जा सकता है (मैंने कोशिश की।)

मैंने इसे मानचित्र को आईफ्रेम में आवास द्वारा हल किया और उसके बाद iFrame नक्शा तत्व के भीतर रखा गया है। इस तरह मानचित्र द्वारा प्राप्त एक्स, वाई क्लिक हैंडलर iFrame के भीतर सटीक है और इसलिए लेट, लंबा भी सटीक है। चूंकि माता-पिता और आईफ्रेम दोनों एक ही डोमेन से हैं, इसलिए आगे और आगे संवाद करने में कोई समस्या नहीं है।

संदर्भ को पूरा करने के iFrame आधारित समाधान के रूप में मेरे द्वारा परीक्षण किया है, निश्चित रूप से बी बी 9 & संस्करण, Android क्रोम, एंड्रॉयड डिफ़ॉल्ट और iPhone सफारी के साथ संगत है।

पर समाधान बाहर की जाँच करें - http://suat1.vocanic.net//saralee/apps/dengue_alert/ और http://suat1.vocanic.net//saralee/apps/dengue_alert/mobileMap.php (WIP संस्करणों बदलने के लिए या समय के साथ तोड़ने के लिए उत्तरदायी)

पर iFrame