फिटबाउंड() एपीआई वी 3

पर फिट नहीं है मैं देश के मानचित्र को प्रदर्शित करने के लिए Google API v3 से geocoder का उपयोग कर रहा हूं। मुझे देश के लिए अनुशंसित व्यूपोर्ट मिलता है लेकिन जब मैं इस व्यूपोर्ट में मानचित्र को फिट करना चाहता हूं, तो यह काम नहीं करता है (नीचे दिए गए कोड में फिटबाउंड फ़ंक्शन को कॉल करने से पहले और बाद में सीमाएं देखें)।फिटबाउंड() एपीआई वी 3

मैं क्या गलत कर रहा हूं?

मैं अपने मानचित्र का व्यूपोर्ट results[0].geometry.viewport पर कैसे सेट कर सकता हूं?

var geocoder = new google.maps.Geocoder(); 
geocoder.geocode(
    {'address': '{{countrycode}}'}, 
    function(results, status) { 
     var bounds = new google.maps.LatLngBounds(); 
     bounds = results[0].geometry.viewport; 
     console.log(bounds);   // ((35.173, -12.524), (45.244, 5.098)) 
     console.log(map.getBounds()); // ((34.628, -14.683), (58.283, 27.503)) 
     map.fitBounds(bounds);    
     console.log(map.getBounds()); // ((25.740, -24.806), (52.442, 17.380)) 
    } 
);

स्रोत

2010-03-22 jul

यह इसलिए होता है क्योंकि fitBounds() एक व्यूपोर्ट कि अधिकतम ज़ूम स्तर संभव का उपयोग कर नक्शा कैनवास फिट बैठता है पर ले जाने की आवश्यकता है। दूसरी तरफ, जियोकोडर द्वारा लौटाया गया व्यूप नक्शा कैनवास के आकार, लेआउट या ज़ूम स्तर पर निर्भर नहीं है। इसलिए fitBounds() विधि मानचित्र के केंद्र में पास LatLngBounds को पूर्ण रूप से देखने के लिए मानचित्र के व्यूपोर्ट को समायोजित करती है।

आप एक स्पष्ट demonstation के लिए निम्न उदाहरण जाँच करना चाहते हो सकता है:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps fitBounds Demo</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
</head> 
<body> 
    <div id="map" style="width: 500px; height: 350px"></div> 

    <script type="text/javascript"> 
     var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP }; 
     var map = new google.maps.Map(document.getElementById("map"), myOptions); 
     var geocoder = new google.maps.Geocoder(); 

     geocoder.geocode({'address': 'RU'}, function (results, status) { 
     var ne = results[0].geometry.viewport.getNorthEast(); 
     var sw = results[0].geometry.viewport.getSouthWest(); 

     map.fitBounds(results[0].geometry.viewport);    

     var boundingBoxPoints = [ 
      ne, new google.maps.LatLng(ne.lat(), sw.lng()), 
      sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne 
     ]; 

     var boundingBox = new google.maps.Polyline({ 
      path: boundingBoxPoints, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 

     boundingBox.setMap(map); 
     }); 
    </script> 
</body> 
</html>

नीचे ऊपर के उदाहरण से विभिन्न देशों के लिए कुछ स्क्रीनशॉट रहे हैं। लाल बाउंडिंग बॉक्स geocoder द्वारा भेजा गया व्यूपोर्ट है। सीमांकन बॉक्स और वास्तविक व्यूपोर्ट के बीच अंतर नोट, के रूप में fitBounds() द्वारा समायोजित:

देश: अमेरिका

देश: RU

देश: आईटी

स्रोत

2010-03-22 23:45:16

धन्यवाद डैनियल। – jul

मुझे यह समझने में परेशानी थी कि यह कैसे करना है, भयानक विस्तृत स्पष्टीकरण! – designermonkey

पूरी तरह से स्पष्टीकरण के लिए बहुत बहुत धन्यवाद। बाउंडिंगबॉक्स यह स्पष्ट करने के लिए एक अच्छा विचार था। – Symmetric

जैसा कि आप जानते किस तरह से इस अनुकूलित किया जा सकता है, मैं अगर आप

सिर्फ fitBounds के साथ एक नमूना व्यूपोर्ट में boundingBox के कुछ ढीला करना पसंद करते हैं आप क्या कर सकते का एक नमूना तैयार किया है यह बताने के लिए : http://jsbin.com/cakuhaca/1/edit
जब आप परवाह नहीं है कि सभी व्यूपोर्ट दिखाई दे रहा है और हमेशा एक में ज़ूम और अधिक स्तर के लिए एक नमूना: http://jsbin.com/rofupidi/1/edit
एक नमूना है जब आप केवल तभी वीं की Stip परवाह ई बाउंडिंग बॉक्स जिसे आप खो रहे हैं क्षैतिज या लंबवत http://jsbin.com/rezapuye/1/edit

स्रोत

2012-10-30 10:49:08 kaskader

:(यह लिंक मर चुका है। –

एक और स्थायी लिंक – kaskader

मृत के साथ तय ..... –

फिटबाउंड() एपीआई वी 3

उत्तर

संबंधित मुद्दे