javascript كود الخاصة - خريطة مركز تلقائي مع علامات متعددة في واجهة برمجة تطبيقات خرائط Google الإصدار 3




3 Answers

هناك طريقة أسهل ، من خلال توسيع 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);
});

بهذه الطريقة ، يمكنك استخدام عدد عشوائي من النقاط ، ولا تحتاج إلى معرفة الطلب مسبقًا.

Demo jsFiddle here: http://jsfiddle.net/x5R63/

ماب قوقل

هذا ما أستخدمه لعرض خريطة تتضمن 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) . هل هناك طريقة لجعل الخريطة تتمحور تلقائيًا حول الإحداثيات الثلاثة؟




للعثور على مركز الخريطة بالضبط ، ستحتاج إلى ترجمة إحداثيات خطوط الطول / العرض إلى إحداثيات بكسل ثم العثور على مركز البكسل وتحويلها إلى إحداثيات خطوط الطول / العرض.

قد لا تلاحظ أو تفكر في الانجراف تبعاً لمدى شمال أو جنوب خط الاستواء الذي أنت عليه. يمكنك رؤية الانجراف عن طريق عمل map.setCenter (map.getBounds (). getCenter ()) داخل setInterval ، سيختفي الانجراف ببطء مع اقترابه من خط الاستواء.

يمكنك استخدام ما يلي للترجمة بين إحداثيات lat / lon و pixel. تستند إحداثيات البكسل على مستوى عالٍ من العالم بأكمله ، ولكن يمكنك العثور على مركز ذلك وتبديله مرة أخرى إلى خط الطول / خط العرض.

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



كان لدي وضع لا أستطيع فيه تغيير الكود القديم ، لذا أضفت وظيفة javascript هذه لحساب نقطة المركز ومستوى التكبير:

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




Related