javascript - যবহ - লোকেশন ম্যাপ




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

আমি সম্প্রতি গুগল ম্যাপস এপিআই ভি 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]
    });
  }
}

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


উত্তর মার্কারগুলির জন্য মানচিত্রের সীমানাগুলি সমন্বয় করার জন্য নিখুঁত তবে যদি আপনি বহুভুজ এবং বৃত্তের মতো আকারের জন্য 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));

গুগল ম্যাপস এপিআই ভি 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 এখানে চেক করতে পারেন


সবকিছু সাজানো হয়েছে - কোডের জন্য শেষ কয়েকটি লাইন দেখুন - ( 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