FitBounds () في Google Maps API V3 لا يناسب الحدود
-
21-09-2019 - |
سؤال
أنا أستخدم الجيوكيج من 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()
:
البلد: الولايات المتحدة
البلد: رو
البلد: ذلك
نصائح أخرى
فقط لإعلامك بأي طريقة يمكن تخصيصها ، لقد قمت بإعداد عينة مما يمكنك فعل
عينة مع فقط
fitBounds
: http://jsbin.com/cakuhaca/1/editعينة عندما لا تهتم أن يكون كل منفذ العرض مرئيًا وتكبير دائمًا في مستوى آخر: http://jsbin.com/rofupidi/1/edit
عينة عندما تهتم فقط إذا كان STIP من المربع المحيط الذي تفقده هو أكثر من x بكسل في أفقي أو رأسي http://jsbin.com/rezapuye/1/edit