FitBounds () في Google Maps API V3 لا يناسب الحدود

StackOverflow https://stackoverflow.com/questions/2494756

سؤال

أنا أستخدم الجيوكيج من Google API V3 لعرض خريطة لبلد. أحصل على منفذ العرض الموصى به للبلد ، لكن عندما أرغب في وضع الخريطة مع منفذ العرض هذا ، فإنه لا يعمل (انظر الحدود قبل وبعد استدعاء وظيفة FitBounds في الكود أدناه).

ما الخطأ الذي افعله؟

كيف يمكنني تعيين منفذ العرض الخاص بي على results[0].geometry.viewport?

var geocoder = new google.maps.Geocoder();
geocoder.geocode(
    {'address': '{{countrycode}}'},
    function(results, status) {
        var bounds = new google.maps.LatLngBounds();
        bounds = results[0].geometry.viewport;
        console.log(bounds);          // ((35.173, -12.524), (45.244, 5.098))
        console.log(map.getBounds()); // ((34.628, -14.683), (58.283, 27.503))
        map.fitBounds(bounds);               
        console.log(map.getBounds()); // ((25.740, -24.806), (52.442, 17.380))
    }
);
هل كانت مفيدة؟

المحلول

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

قد ترغب في التحقق من المثال التالي للحصول على شيطان أوضح:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps fitBounds Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 500px; height: 350px"></div> 

   <script type="text/javascript"> 
      var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
      var map = new google.maps.Map(document.getElementById("map"), myOptions);
      var geocoder = new google.maps.Geocoder();

      geocoder.geocode({'address': 'RU'}, function (results, status) {
         var ne = results[0].geometry.viewport.getNorthEast();
         var sw = results[0].geometry.viewport.getSouthWest();

         map.fitBounds(results[0].geometry.viewport);               

         var boundingBoxPoints = [
            ne, new google.maps.LatLng(ne.lat(), sw.lng()),
            sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
         ];

         var boundingBox = new google.maps.Polyline({
            path: boundingBoxPoints,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
         });

         boundingBox.setMap(map);
      }); 
   </script> 
</body> 
</html>

فيما يلي بعض لقطات الشاشة لمختلف البلدان من المثال أعلاه. صندوق المحيط الأحمر هو إرجاع المنفذ الذي تم إرجاعه بواسطة الجيوكودير. لاحظ الفرق بين المربع المحيط ومنفذ العرض الفعلي ، كما تم ضبطه بواسطة fitBounds():

البلد: الولايات المتحدة

US

البلد: رو

RU

البلد: ذلك

IT

نصائح أخرى

فقط لإعلامك بأي طريقة يمكن تخصيصها ، لقد قمت بإعداد عينة مما يمكنك فعل

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top