গুগল ম্যাপস এপিআই v3- এ একাধিক চিহ্নিতকারী সহ অটো-সেন্টার মানচিত্র

225

এটি আমি 3 পিন / চিহ্নিতকারী সহ একটি মানচিত্র প্রদর্শন করতে ব্যবহার করি:

<script>
  function initialize() {
    var locations = [
      ['DESCRIPTION', 41.926979, 12.517385, 3],
      ['DESCRIPTION', 41.914873, 12.506486, 2],
      ['DESCRIPTION', 41.918574, 12.507201, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(41.923, 12.513),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }

  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
    document.body.appendChild(script);
  }

  window.onload = loadScript;
</script>

<div id="map" style="width: 900px; height: 700px;"></div>

আমি যা খুঁজছি তা হ'ল মানচিত্রটির কেন্দ্রস্থলে "ম্যানুয়ালি" থাকা এড়ানো একটি উপায় center: new google.maps.LatLng(41.923, 12.513)। তিনটি স্থানাঙ্কে স্বয়ংক্রিয়ভাবে মানচিত্রকে কেন্দ্র করার কোনও উপায় আছে কি?

javascript  google-maps  google-maps-api-3  google-maps-markers 
— MultiformeIngegno
সূত্র
— SphynxTech

উত্তর:

448

LatLngBoundsদুটি পয়েন্ট থেকে সুস্পষ্টভাবে একটি তৈরি করার পরিবর্তে খালি বাড়িয়ে আরও সহজ উপায় রয়েছে's ( আরও তথ্যের জন্য এই প্রশ্নটি দেখুন )

আপনার কোডে যুক্ত হওয়া এই জাতীয় কিছু দেখতে হবে:

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();    

for (i = 0; i < locations.length; i++) {  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  //extend the bounds to include each marker's position
  bounds.extend(marker.position);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);

//(optional) restore the zoom level after the map is done scaling
var listener = google.maps.event.addListener(map, "idle", function () {
    map.setZoom(3);
    google.maps.event.removeListener(listener);
});

এইভাবে, আপনি পয়েন্টগুলির একটি স্বেচ্ছাসেবী সংখ্যা ব্যবহার করতে পারেন, এবং আদেশটি আগে জানতে হবে না।

ডেমো জেএসফিডেল এখানে: http://jsfiddle.net/x5R63/

— metadept
সূত্র
ধন্যবাদ, এটি কাজ করে! উত্তরটি গ্রহণ করতে আমাকে কেবল থামিয়ে দেয় যে জুম স্তরটি আর সম্মানিত হয় না। আপনি কীভাবে এটি আবার কাজ করতে জানেন? :)
— মাল্টিফর্মইঞ্জেনি
যদি আপনি ব্যবহার @MultiformeIngegno সূক্ষ্ম কাজ করা উচিত setZoomপরেfitBounds
— metadept
fitBoundsসংক্ষিপ্ত পরীক্ষায় আমার জন্য কাজ করার পরে @ মাল্টিফর্মইঞ্জেনো এটিকে ডেকে আনা ; আপনার যদি এখনও সমস্যা হয় তবে আমাকে জানান।
— মেটাডেপট
2
@metadept কীভাবে আমি এই কেন্দ্রের অবস্থানটিতে একটি চিহ্নিতকারী সেট করতে পারি? সীমা ল্যাটল্যাং পাওয়া সম্ভব?
— ভিজিটর গেরেরিও
1
map.panToBounds(bounds);স্বয়ংক্রিয় জুম জন্য।
— নমাল
28

আমি মনে করি আপনাকে অক্ষাংশ মিনিট এবং দ্রাঘিমাংশ মিনিট গণনা করতে হবে: আপনার পয়েন্টটি কেন্দ্র করে ফাংশনটির সাথে এখানে একটি উদাহরণ রয়েছে:

//Example values of min & max latlng values
var lat_min = 1.3049337;
var lat_max = 1.3053515;
var lng_min = 103.2103116;
var lng_max = 103.8400188;

map.setCenter(new google.maps.LatLng(
  ((lat_max + lat_min) / 2.0),
  ((lng_max + lng_min) / 2.0)
));
map.fitBounds(new google.maps.LatLngBounds(
  //bottom left
  new google.maps.LatLng(lat_min, lng_min),
  //top right
  new google.maps.LatLng(lat_max, lng_max)
));
— আলেসান্দ্রো মিনোকেচেরি
সূত্র
1

মানচিত্রের সঠিক কেন্দ্রটি সন্ধান করতে আপনাকে ল্যাট / লম্বা স্থানাঙ্কগুলি পিক্সেল স্থানাঙ্কে অনুবাদ করতে হবে এবং তারপরে পিক্সেল কেন্দ্রটি খুঁজে বের করতে হবে এবং এটিকে আবার ল্যাটের / দীর্ঘ স্থানাঙ্কে রূপান্তর করতে হবে।

আপনি সম্ভবত নিরক্ষীয় অঞ্চলটির উত্তর বা দক্ষিণে কতটা নির্ভর করছেন তার দিকে লক্ষ্য রেখে বা লক্ষ্য করবেন না। আপনি সেট-ইন্টেরওয়ালের ভিতরে map.setCenter (map.getBounds ()। GetCenter ()) করে ড্রাইফটটি দেখতে পাবেন, নিরক্ষীয় অঞ্চলের কাছে যাওয়ার সাথে সাথে ধীরে ধীরে ড্রিফটটি অদৃশ্য হয়ে যাবে।

ল্যাট / লম্ব এবং পিক্সেল স্থানাঙ্কের মধ্যে অনুবাদ করতে আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন। পিক্সেল স্থানাঙ্কগুলি পুরো জুম ইন পুরো পৃথিবীর একটি প্লেনের উপর ভিত্তি করে তৈরি করা হয় তবে আপনি এর কেন্দ্রটি খুঁজে পেতে এবং এটিকে আবার ল্যাট / লম্বরে স্যুইচ করতে পারেন।

   var HALF_WORLD_CIRCUMFERENCE = 268435456; // in pixels at zoom level 21
   var WORLD_RADIUS = HALF_WORLD_CIRCUMFERENCE / Math.PI;

   function _latToY ( lat ) {
      var sinLat = Math.sin( _toRadians( lat ) );
      return HALF_WORLD_CIRCUMFERENCE - WORLD_RADIUS * Math.log( ( 1 + sinLat ) / ( 1 - sinLat ) ) / 2;
   }

   function _lonToX ( lon ) {
      return HALF_WORLD_CIRCUMFERENCE + WORLD_RADIUS * _toRadians( lon );
   }

   function _xToLon ( x ) {
      return _toDegrees( ( x - HALF_WORLD_CIRCUMFERENCE ) / WORLD_RADIUS );
   }

   function _yToLat ( y ) {
      return _toDegrees( Math.PI / 2 - 2 * Math.atan( Math.exp( ( y - HALF_WORLD_CIRCUMFERENCE ) / WORLD_RADIUS ) ) );
   }

   function _toRadians ( degrees ) {
      return degrees * Math.PI / 180;
   }

   function _toDegrees ( radians ) {
      return radians * 180 / Math.PI;
   }
— ছায়া মানুষ
সূত্র
0

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

latCenter = ল্যাটটোটাল / মার্কারকাউন্ট; lonCenter = লন্টোটাল / মার্কারকাউন্ট;

— স্ট্যান অ্যামডাইটিস
সূত্র
0

আমার এমন পরিস্থিতি হয়েছিল যেখানে আমি পুরানো কোড পরিবর্তন করতে পারি না, তাই কেন্দ্রের পয়েন্ট এবং জুম স্তর গণনা করার জন্য এই জাভাস্ক্রিপ্ট ফাংশনটি যুক্ত করেছি:

//input
var tempdata = ["18.9400|72.8200-19.1717|72.9560-28.6139|77.2090"];

function getCenterPosition(tempdata){
	var tempLat = tempdata[0].split("-");
	var latitudearray = [];
	var longitudearray = [];
	var i;
	for(i=0; i<tempLat.length;i++){
		var coordinates = tempLat[i].split("|");
		latitudearray.push(coordinates[0]);
		longitudearray.push(coordinates[1]);
	}
	latitudearray.sort(function (a, b) { return a-b; });
	longitudearray.sort(function (a, b) { return a-b; });
	var latdifferenece = latitudearray[latitudearray.length-1] - latitudearray[0];
	var temp = (latdifferenece / 2).toFixed(4) ;
	var latitudeMid = parseFloat(latitudearray[0]) + parseFloat(temp);
	var longidifferenece = longitudearray[longitudearray.length-1] - longitudearray[0];
	temp = (longidifferenece / 2).toFixed(4) ;
	var longitudeMid = parseFloat(longitudearray[0]) + parseFloat(temp);
	var maxdifference = (latdifferenece > longidifferenece)? latdifferenece : longidifferenece;
	var zoomvalue;	
	if(maxdifference >= 0 && maxdifference <= 0.0037)  //zoom 17
		zoomvalue='17';
	else if(maxdifference > 0.0037 && maxdifference <= 0.0070)  //zoom 16
		zoomvalue='16';
	else if(maxdifference > 0.0070 && maxdifference <= 0.0130)  //zoom 15
		zoomvalue='15';
	else if(maxdifference > 0.0130 && maxdifference <= 0.0290)  //zoom 14
		zoomvalue='14';
	else if(maxdifference > 0.0290 && maxdifference <= 0.0550)  //zoom 13
		zoomvalue='13';
	else if(maxdifference > 0.0550 && maxdifference <= 0.1200)  //zoom 12
		zoomvalue='12';
	else if(maxdifference > 0.1200 && maxdifference <= 0.4640)  //zoom 10
		zoomvalue='10';
	else if(maxdifference > 0.4640 && maxdifference <= 1.8580)  //zoom 8
		zoomvalue='8';
	else if(maxdifference > 1.8580 && maxdifference <= 3.5310)  //zoom 7
		zoomvalue='7';
	else if(maxdifference > 3.5310 && maxdifference <= 7.3367)  //zoom 6
		zoomvalue='6';
	else if(maxdifference > 7.3367 && maxdifference <= 14.222)  //zoom 5
		zoomvalue='5';
	else if(maxdifference > 14.222 && maxdifference <= 28.000)  //zoom 4
		zoomvalue='4';
	else if(maxdifference > 28.000 && maxdifference <= 58.000)  //zoom 3
		zoomvalue='3';
	else
		zoomvalue='1';
	return latitudeMid+'|'+longitudeMid+'|'+zoomvalue;
}
স্নিপেট প্রসারিত করুন

— NEQSH
সূত্র
0

এই থ্রেডটি যদি কেউ আসে সে ক্ষেত্রে আমার এই বিষয়টি গ্রহণ করুন:

এটি নির্ধারণ করে latএবং আপনার চূড়ান্ত ভেরিয়েবলগুলির যে কোনওটিকে ধ্বংস করে অ-সংখ্যাগত ডেটা থেকে রক্ষা করতে সহায়তা করে lng।

এটি আপনার সমস্ত স্থানাঙ্ক গ্রহণ করে এগুলি পৃথক করে latএবং lngকোনও অ্যারের উপাদানগুলিতে ভাগ করে, তারপরে প্রতিটিটির গড় নির্ধারণ করে কাজ করে। সেই গড়টি কেন্দ্র হওয়া উচিত (এবং আমার পরীক্ষার ক্ষেত্রে এটি সত্য প্রমাণিত হয়েছে))

var coords = "50.0160001,3.2840073|50.014458,3.2778274|50.0169713,3.2750587|50.0180745,3.276742|50.0204038,3.2733474|50.0217796,3.2781737|50.0293064,3.2712542|50.0319918,3.2580816|50.0243287,3.2582281|50.0281447,3.2451177|50.0307925,3.2443178|50.0278165,3.2343882|50.0326574,3.2289809|50.0288569,3.2237612|50.0260081,3.2230589|50.0269495,3.2210104|50.0212645,3.2133541|50.0165868,3.1977592|50.0150515,3.1977341|50.0147901,3.1965286|50.0171915,3.1961636|50.0130074,3.1845098|50.0113267,3.1729483|50.0177206,3.1705726|50.0210692,3.1670394|50.0182166,3.158297|50.0207314,3.150927|50.0179787,3.1485753|50.0184944,3.1470782|50.0273077,3.149845|50.024227,3.1340514|50.0244172,3.1236235|50.0270676,3.1244474|50.0260853,3.1184879|50.0344525,3.113806";

var filteredtextCoordinatesArray = coords.split('|');    

    centerLatArray = [];
    centerLngArray = [];


    for (i=0 ; i < filteredtextCoordinatesArray.length ; i++) {

      var centerCoords = filteredtextCoordinatesArray[i]; 
      var centerCoordsArray = centerCoords.split(',');

      if (isNaN(Number(centerCoordsArray[0]))) {      
      } else {
        centerLatArray.push(Number(centerCoordsArray[0]));
      }

      if (isNaN(Number(centerCoordsArray[1]))) {
      } else {
        centerLngArray.push(Number(centerCoordsArray[1]));
      }                    

    }

    var centerLatSum = centerLatArray.reduce(function(a, b) { return a + b; });
    var centerLngSum = centerLngArray.reduce(function(a, b) { return a + b; });

    var centerLat = centerLatSum / filteredtextCoordinatesArray.length ; 
    var centerLng = centerLngSum / filteredtextCoordinatesArray.length ;                                    

    console.log(centerLat);
    console.log(centerLng);

    var mapOpt = {      
    zoom:8,
    center: {lat: centerLat, lng: centerLng}      
    };
— ব্রায়ান পাওয়েল
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.