Google मानचित्र API v3 - सेट सीमाएं और केंद्र

Question

मैंने हाल ही में Google मानचित्र API V3 पर स्विच किया है। मैं एक साधारण उदाहरण का काम कर रहा हूं जो एक सरणी से मार्कर प्लॉट करता है, हालांकि मुझे नहीं पता कि मार्करों के संबंध में स्वचालित रूप से कैसे केंद्र और ज़ूम करना है।

मैंने Google के अपने दस्तावेज़ों सहित नेट उच्च और निम्न की खोज की है, लेकिन स्पष्ट उत्तर नहीं मिला है। मुझे पता है कि मैं केवल समन्वय का औसत ले सकता हूं, लेकिन मैं तदनुसार ज़ूम कैसे सेट करूं?

function initialize() { 
    var myOptions = { 
    zoom: 10, 
    center: new google.maps.LatLng(-33.9, 151.2), 


    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 

    setMarkers(map, beaches); 
} 


var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.423036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 121.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.450198, 151.259302, 1] 
]; 

function setMarkers(map, locations) { 

    var image = new google.maps.MarkerImage('images/beachflag.png', 
     new google.maps.Size(20, 32), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png', 

     new google.maps.Size(37, 32), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 


     var lat = map.getCenter().lat(); 
     var lng = map.getCenter().lng();  


    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 
    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 
    } 
} 

Answer 1

गॉट सब कुछ हल कर - कोड के लिए पिछले कुछ लाइनों को देखने के - (bounds.extend(myLatLng); map.fitBounds(bounds);)

function initialize() { 
    var myOptions = { 
    zoom: 10, 
    center: new google.maps.LatLng(0, 0), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), 
    myOptions); 
    setMarkers(map, beaches); 
} 

var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 161.259052, 5], 
    ['Cronulla Beach', -36.028249, 153.157507, 3], 
    ['Manly Beach', -31.80010128657071, 151.38747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.159302, 1] 
]; 

function setMarkers(map, locations) { 
    var image = new google.maps.MarkerImage('images/beachflag.png', 
    new google.maps.Size(20, 32), 
    new google.maps.Point(0,0), 
    new google.maps.Point(0, 32)); 
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png', 
    new google.maps.Size(37, 32), 
    new google.maps.Point(0,0), 
    new google.maps.Point(0, 32)); 
    var shape = { 
    coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
    type: 'poly' 
    }; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 
    bounds.extend(myLatLng); 
    } 
    map.fitBounds(bounds); 
} 

Answer 2

हाँ, बस अपने नए सीमा वस्तु घोषणा करते हैं।

var bounds = new google.maps.LatLngBounds(); 

फिर प्रत्येक मार्कर के लिए, अपनी सीमा वस्तु का विस्तार:

bounds.extend(myLatLng); 
map.fitBounds(bounds); 

एपीआई: google.maps.LatLngBounds

Answer 3

उपयोग एक,

map.setCenter (bounds.getCenter(), नक्शे के नीचे .getBoundsZoomLevel (सीमा));

Answer 4

सेट सेंटर() विधि अभी भी फ्लैश के लिए मैप्स एपीआई के नवीनतम संस्करण के लिए लागू है जहां फिटबाउंड() मौजूद नहीं है।

Answer 5

गूगल मैप्स एपीआई v3 के लिए मेरे सुझाव (नहीं लगता कि यह अधिक कुशलतापूर्वक किया जा सकता है) किया जाएगा:

gmap : { 
    fitBounds: function(bounds, mapId) 
    { 
     //incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];" 
     if (bounds==null) return false; 
     maps[mapId].fitBounds(bounds); 
    } 
} 

परिणाम में यू अपने नक्शे विंडो में सीमा में सभी बिंदुओं फिट होगा।

उदाहरण पूरी तरह से काम करता है और यू स्वतंत्र रूप से इसे यहाँ जाँच कर सकते हैं www.zemelapis.lt

Answer 6

जवाब के लिए मार्करों के लिए नक्शा सीमाओं को समायोजित एकदम सही हैं, लेकिन यदि आप बहुभुज और हलकों जैसे आकार के लिए गूगल मैप्स की सीमाओं से ज़्यादा चाहते हैं, तो आप उपयोग कर सकते हैं निम्नलिखित कोड:

मंडलियां

bounds.union(circle.getBounds()); 

बहुभुज के लिए

polygon.getPaths().forEach(function(path, index) 
{ 
    var points = path.getArray(); 
    for(var p in points) bounds.extend(points[p]); 
}); 

आयत

bounds.union(overlay.getBounds()); 

लिए पॉलीलाइन लिए

var path = polyline.getPath(); 

var slat, blat = path.getAt(0).lat(); 
var slng, blng = path.getAt(0).lng(); 

for(var i = 1; i < path.getLength(); i++) 
{ 
    var e = path.getAt(i); 
    slat = ((slat < e.lat()) ? slat : e.lat()); 
    blat = ((blat > e.lat()) ? blat : e.lat()); 
    slng = ((slng < e.lng()) ? slng : e.lng()); 
    blng = ((blng > e.lng()) ? blng : e.lng()); 
} 

bounds.extend(new google.maps.LatLng(slat, slng)); 
bounds.extend(new google.maps.LatLng(blat, blng));