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




google-maps google-maps-api-3 (4)

मैंने हाल ही में 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]
    });
  }
}

Google नक्शे api 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 देख सकते हैं


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


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

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


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




google-maps-api-3