গুগল ম্যাপ এপিআই v3 - সেট সীমা এবং কেন্দ্র

Question

আমি সম্প্রতি গুগল ম্যাপস এপিআই ভি 3 এ স্যুইচ করেছি। আমি একটি সরল উদাহরণ দিয়ে কাজ করছি যা কোন অ্যারের থেকে চিহ্নিতকারীদের প্লট করে, তবে আমি কীভাবে চিহ্নিত করতে পারি না এবং চিহ্নিতকারীদের সম্মানের সাথে কীভাবে স্বয়ংক্রিয়ভাবে জুম করা যায়।

আমি গুগলের নিজস্ব ডকুমেন্টেশন সহ নেট উচ্চ এবং নিম্ন অনুসন্ধান করেছি, তবে এর সুস্পষ্ট উত্তর খুঁজে পাইনি। আমি জানি আমি কেবল সহ-সমন্বয়ের গড় নিতে পারি, তবে আমি কীভাবে সেই অনুযায়ী জুম সেট করব?

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

API: google.maps.LatLngBounds ounds

Comments

আপনি এই মানচিত্রটিও যুক্ত করতে পারেন setसेटসেন্টার (সীমানা.সেটসেন্টার ());

— রমন ঘাই

উত্তর এবং রমন এর মন্তব্য উভয়ই আমার যা প্রয়োজন তার প্রতি আমার ফোকাসটি হ্রাস করতে সহায়তা করেছিল।

— জাস্টজহান

@ স্যাম 152: আপনি কোনও সম্পর্কিত প্রশ্নের জন্য 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 ডকুমেন্টগুলি আশ্চর্যজনকভাবে অস্পষ্ট। :(

— স্কট

দুঃখিত এটি ভুল জায়গায় আছে। এটি নির্বাচিত উত্তরের জন্য একটি মন্তব্য হতে বোঝানো হয়েছে। তবে কি লুপের জন্য প্রসারিত ফাংশনটি থাকা দরকার?

— কিডব্রেক্স

হ্যালো, দুর্দান্ত কোড তবে "এই জুম স্তরে কোনও চিত্র পাওয়া যায় না" এড়াতে এই কোডটি বাড়ানো যেতে পারে। কারণ এই কোডটি জুম স্তরের যত্ন নেয় না, এটি নিশ্চিত করে যে এটি সমস্ত চিহ্নিতকারীকে দেখায়, তবে ব্যক্তিগতভাবে আমি "কোনও চিত্র নয় ..." বার্তা এড়াতে নিম্ন জুমটি দেখতে পছন্দ করব। কোন ধারণা দয়া করে?

— slah

এগুলি কি "বাউন্ডস.একসেট (মাইল্যাটলং); ম্যাপ.ফিটবাউন্ডস (সীমানা);" অ্যান্ড্রয়েডের জন্যও উপলব্ধ?

— সিংহফ্লাই

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

— কায়সার

@ লোকালটাইম আসলে, আপনার ওয়েবসাইটটির কাজ করার জন্য গুগল ম্যাপস এপিআই কীগুলি দরকার

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

পলিলাইনগুলির জন্য

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

সেট সেন্টার () পদ্ধতিটি এখনও ফ্ল্যাশের মানচিত্র API এর সর্বশেষ সংস্করণে প্রযোজ্য যেখানে ফিটবাউন্ডস () বিদ্যমান নেই।

Answer 6

একের নীচে ব্যবহার করুন,

map.setCenter (চৌদ্দ.সেটেন্টার (), ম্যাপ.জেটবাউন্ডজুমলভেল (সীমানা));

Comments

এটি গুগল ম্যাপস এপিআই v2

— dave1010

আপনার আরও একটি চিন্তাভাবনা সমাধান সরবরাহ করতে হবে। এবং আমি বিশ্বাস করি এটি গুগল ম্যাপস ভি 2 এর জন্য।

— AllJs