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


Answers

أعتقد أنه يجب عليك حساب دقيقة latitudine min و longitude min: إليك مثال مع الوظيفة المراد استخدامها لتوسيط وجهة نظرك:

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




أستخدم الطريقة أعلاه لتعيين حدود الخريطة ، ثم بدلاً من إعادة ضبط مستوى التكبير ، أحسب فقط متوسط ​​LAT ومتوسط ​​LON وقم بتعيين نقطة المركز إلى ذلك الموقع. أقوم بإضافة جميع قيم lat في latTotal وكافة قيم lon إلى lontotal ثم قسمة على عدد العلامات. بعد ذلك أقوم بتعيين نقطة مركز الخريطة إلى قيم المتوسط ​​هذه.

latCenter = latTotal / markercount؛ lonCenter = lontotal / markercount؛




هنا هي وجهة نظري حول هذا في حالة أي شخص يأتي عبر هذا الموضوع:

يساعد هذا على الحماية ضد البيانات غير الرقمية التي تدمر أيًا من المتغيرات النهائية التي تحدد lat و lng .

إنه يعمل عن طريق أخذ كل الإحداثيات الخاصة بك ، تحليلها إلى عناصر lng و 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}      
    };



Links