Google Map API V3 - 한계 및 센터를 설정합니다
-
21-09-2019 - |
문제
최근에 Google Maps API V3로 전환했습니다. 배열에서 마커를 표시하는 간단한 예제를 사용하고 있지만 마커와 관련하여 자동으로 중심하고 확대하는 방법을 모릅니다.
Google의 자체 문서를 포함하여 순수 및 낮음을 검색했지만 명확한 답변을 찾지 못했습니다. 나는 단순히 평균 좌표를 취할 수 있다는 것을 알고 있지만 그에 따라 줌을 어떻게 설정합니까?
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
setMarkers(map, beaches);
}
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.423036, 151.259052, 5],
['Cronulla Beach', -34.028249, 121.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.450198, 151.259302, 1]
];
function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('images/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var lat = map.getCenter().lat();
var lng = map.getCenter().lng();
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
해결책 2
모든 것을 정렬했습니다 - 코드의 마지막 몇 줄을 참조하십시오 - (bounds.extend(myLatLng); map.fitBounds(bounds);
)
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
setMarkers(map, beaches);
}
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 161.259052, 5],
['Cronulla Beach', -36.028249, 153.157507, 3],
['Manly Beach', -31.80010128657071, 151.38747820854187, 2],
['Maroubra Beach', -33.950198, 151.159302, 1]
];
function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('images/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
bounds.extend(myLatLng);
}
map.fitBounds(bounds);
}
다른 팁
예, 단순히 새 바운드 객체를 선언하십시오.
var bounds = new google.maps.LatLngBounds();
그런 다음 각 마커에 대해 바운드 객체를 확장하십시오.
bounds.extend(myLatLng);
map.fitBounds(bounds);
API : google.maps.latlngbounds
Google Maps에 대한 나의 제안 API v3은 (보다 효과적으로 수행 할 수 없다고 생각합니다) :
gmap : {
fitBounds: function(bounds, mapId)
{
//incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];"
if (bounds==null) return false;
maps[mapId].fitBounds(bounds);
}
}
결과에서 u는지도 창의 모든 지점에 맞습니다.
예제는 완벽하게 작동하며 여기에서 자유롭게 확인할 수 있습니다. www.zemelapis.lt
답은 마커의 맵 경계 조정에 적합하지만 다각형 및 원과 같은 모양의 Google지도 경계를 확장하려면 다음 코드를 사용할 수 있습니다.
원을 위해
bounds.union(circle.getBounds());
다각형의 경우
polygon.getPaths().forEach(function(path, index)
{
var points = path.getArray();
for(var p in points) bounds.extend(points[p]);
});
직사각형
bounds.union(overlay.getBounds());
폴리 라인의 경우
var path = polyline.getPath();
var slat, blat = path.getAt(0).lat();
var slng, blng = path.getAt(0).lng();
for(var i = 1; i < path.getLength(); i++)
{
var e = path.getAt(i);
slat = ((slat < e.lat()) ? slat : e.lat());
blat = ((blat > e.lat()) ? blat : e.lat());
slng = ((slng < e.lng()) ? slng : e.lng());
blng = ((blng > e.lng()) ? blng : e.lng());
}
bounds.extend(new google.maps.LatLng(slat, slng));
bounds.extend(new google.maps.LatLng(blat, blng));
setCenter () 메소드는 FitBounds ()가 존재하지 않는 Flash 용 최신 버전의 Maps API에 여전히 적용됩니다.
아래에서 사용하십시오.
map.setCenter (bounds.getCenter (), map.getBoundSzoomLevel (bounds));