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

हां, आप अपनी नई सीमा वस्तु घोषित कर सकते हैं।

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

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

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

एपीआई: google.maps.LatLngBounds

Comments

आप इस मानचित्र को भी जोड़ सकते हैं। setCenter (bounds.getCenter ());

— रमन घई '

रमन द्वारा दिए गए उत्तर और टिप्पणी दोनों ने मेरा ध्यान केंद्रित करने में मदद की कि मुझे क्या चाहिए।

— JustJohn

@ Sam152: आप संबंधित प्रश्न के लिए 500 प्रतिनिधि इनाम में दिलचस्पी ले सकते हैं ।

— डैन डस्केलस्क्यू

Answer 2

सब कुछ मिला - कोड के लिए अंतिम कुछ पंक्तियाँ देखें - ( 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);
}

Comments

धन्यवाद! 3.0 दस्तावेज़ आश्चर्यजनक रूप से अस्पष्ट हैं कि यह कार्यक्षमता कहाँ गई।

— बिल

3.0 दस्तावेज आश्चर्यजनक रूप से अस्पष्ट हैं कि बहुत सारी चीजें कहां गईं। :(

— स्कॉट

क्षमा करें यह गलत जगह पर है। यह चयनित उत्तर के लिए टिप्पणी करने के लिए है। लेकिन क्या लूप के लिए विस्तार फ़ंक्शन आपके अंदर होना चाहिए?

— 14

नमस्कार, महान कोड लेकिन "इस ज़ूम स्तर पर उपलब्ध कोई चित्र नहीं" से बचने के लिए इस कोड को बढ़ाया जा सकता है। क्योंकि यह कोड ज़ूम स्तर का ध्यान नहीं रखता है, निश्चित रूप से यह सभी मार्करों को दिखाता है, लेकिन "नो इमेजेज़ ..." मैसेजेस से बचने के लिए मैं कम ज़ूम देखना पसंद करूंगा। कोई विचार कृपया?

— स्लैह

क्या ये "bounds.extend (myLatLng); map.fitBounds (सीमा);" Android के लिए भी उपलब्ध है?

— सिंहपर्णी

Answer 3

गूगल मैप्स के लिए मेरा सुझाव एपी 3 होगा (ऐसा मत सोचो कि यह अधिक प्रभावी ढंग से किया जा सकता है):

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 देख सकते हैं

Comments

falseयदि boundsहैं तो लौटने के बजाय null, आप कर सकते हैं maps[ mapId ].getBounds()।

— केसर

@localtime वास्तव में, आपकी वेब साइट को काम करने के लिए Google मानचित्र API कुंजियों की आवश्यकता होती है

Answer 4

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

मंडलियों के लिए

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());

Polylines के लिए

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));

Answer 5

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

Answer 6

नीचे एक का उपयोग करें,

map.setCenter (bounds.getCenter (), map.getBoundsZoomLevel (सीमा));

Comments

यह Google मैप्स API v2 के लिए है

— dave1010

आपको अधिक विचारशील समाधान प्रदान करने की आवश्यकता है। और मेरा मानना ​​है कि यह Google मैप्स v2 के लिए है।

— AllJs