Google मानचित्र API v3 में कई मार्करों के साथ ऑटो-केंद्र का नक्शा

Question

यह वह है जो मैं 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)। क्या स्वचालित रूप से मानचित्र तीन निर्देशांक पर केंद्रित है?

Comments

Google मैप्स API v3

— स्फिंक्सटेक

Answer 1

एक आसान तरीका है, LatLngBoundsदो बिंदुओं से स्पष्ट रूप से एक बनाने के बजाय एक खाली का विस्तार करके । ( अधिक विवरण के लिए यह प्रश्न देखें)

अपने कोड में कुछ इस तरह दिखना चाहिए:

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

इस तरह, आप मनमाने ढंग से संख्या का उपयोग कर सकते हैं, और पहले से आदेश जानने की आवश्यकता नहीं है।

डेमो jsField यहाँ: http://jsfiddle.net/x5R63/

Comments

धन्यवाद, यह काम करता है! केवल एक चीज जो मुझे उत्तर स्वीकार करने से रोकती है वह यह है कि ज़ूम स्तर अब सम्मानित नहीं है। क्या आप जानते हैं कि इसे फिर से कैसे काम करना है? :)

— मल्टीफॉर्म इनगेग्नो

यदि आप setZoomAFTERfitBounds

— मेटैडप्ट

@ MultiformeIngegno fitBoundsएक संक्षिप्त परीक्षण में मेरे लिए काम करने के तुरंत बाद इसे कॉल करना ; मुझे पता है अगर आप अभी भी परेशानी हो रही है।

— मेटाडेप्ट

@metadept मैं इस केंद्र की स्थिति पर एक मार्कर कैसे सेट कर सकता हूं? इसकी सीमा प्राप्त करना संभव है?

— विटोर गुएरेइरो

map.panToBounds(bounds);ऑटो जूम के लिए है।

— नमल

Answer 2

मुझे लगता है कि आपको लैटिट्यूडाइन मिनट और देशांतर मिनट की गणना करनी होगी: यहाँ अपनी बात को केन्द्र में रखने के लिए फ़ंक्शन के साथ एक उदाहरण दिया गया है:

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

Answer 3

मानचित्र के सटीक केंद्र को खोजने के लिए आपको पिक्सेल निर्देशांक में lat / lon निर्देशांक का अनुवाद करना होगा और फिर पिक्सेल केंद्र को खोजना होगा और उस वापस को lat / lon निर्देशांक में बदलना होगा।

हो सकता है कि आप भूमध्य रेखा के उत्तर या दक्षिण के आधार पर बहाव को नोटिस या माइंड न करें। आप एक setInterval के अंदर 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;
   }

Answer 4

मैं मानचित्र सीमाओं को सेट करने के लिए ऊपर की विधि का उपयोग करता हूं, फिर, ज़ूम स्तर को रीसेट करने के बजाय, मैं केवल औसत LAT और औसत LON की गणना करता हूं और उस स्थान पर केंद्र बिंदु सेट करता हूं। मैं latTotal में सभी अव्यक्त मानों को जोड़ता हूं और सभी lon मानों को lontotal में जोड़ता हूं और फिर मार्करों की संख्या से विभाजित करता हूं। मैंने तब उन औसत मूल्यों के लिए मानचित्र केंद्र बिंदु सेट किया।

latCenter = latTotal / markercount; lonCenter = lontotal / markercount;

Answer 5

मेरे पास एक ऐसी स्थिति थी जहां मैं पुराने कोड को नहीं बदल सकता, इसलिए केंद्र बिंदु और ज़ूम स्तर की गणना करने के लिए इस जावास्क्रिप्ट फ़ंक्शन को जोड़ा:

//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;
}

Answer 6

यहाँ इस मामले में किसी को भी इस धागे के पार आने पर ले लो:

यह अपने अंतिम चर कि निर्धारित दोनों में से किसी को नष्ट करने गैर संख्यात्मक डेटा के खिलाफ की रक्षा में मदद करता है 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}      
    };