واجهة برمجة التطبيقات لخرائط غوغل الإصدار 3: خريطة مركز تلقائي ذات علامات متعددة [javascript]


Answers

أعتقد أن لديك لحساب لاتيتودين دقيقة وخط الطول دقيقة: هنا هو مثال مع وظيفة لاستخدام مركز نقطة الخاص بك:

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

ما أبحث عنه هو وسيلة لتجنب الاضطرار إلى "يدويا" العثور على مركز الخريطة مع المركز: جديد google.maps.LatLng (41.923، 12.513). هل هناك طريقة لتعيين الخريطة بشكل تلقائي على الإحداثيات الثلاثة؟




يمكنني استخدام الطريقة أعلاه لتعيين حدود الخريطة، ثم، بدلا من إعادة تعيين مستوى التكبير، وأنا مجرد حساب متوسط ​​لات ومتوسط ​​لون وتعيين نقطة الوسط إلى هذا الموقع. أنا تضيف ما يصل جميع القيم لات في لاتتوتال وجميع القيم لون في لونتوتال ومن ثم تقسيم من قبل عدد من علامات. ثم أضبط نقطة مركز الخريطة على تلك القيم المتوسطة.

لاتسنتر = لاتتوتال / ماركركونت؛ لونسنتر = لونتوتال / ماركركونت؛




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

وهذا يساعد على الحماية من البيانات غير العددية التي تدمر أيا من المتغيرات النهائية التي تحدد 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}      
    };