[英]From an array of coordinates, how could I decide which to center the map on?
假設我正在使用以下位置的 JSON:
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
我在谷歌地圖上繪制這些,我想大致集中在中間的那個。
谷歌地圖 api 中是否有用於執行此操作的函數? 還是我必須自己算出平均值?
我編寫了一個函數,可以將 JSON 和縮放級別傳遞給:
function initialize_map(places, zoom) {
// use first coordinates in the json to initiate the map
var place_lat_lng = new google.maps.LatLng(places[0][1],places[0][2]);
var mapOptions = {
zoom: zoom,
center: place_lat_lng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var marker, i;
// loop through all the places to get markers
for (var i=0;i<places.length;i++)
{
var place = places[i];
marker = new google.maps.Marker({
position: new google.maps.LatLng(place[1], place[2]),
map: map,
animation: google.maps.Animation.DROP
});
// add the marker
marker.setMap(map);
}
}
此功能有效,但不會居中,並且標記將不在視野范圍內。
您將如何使視圖居中並使其所有標記都可見?
Google Maps API v3 包含顯示一組標記的方法:
fitBounds(bounds:LatLngBounds) - None - 設置視口以包含給定的邊界。
將所有標記添加到 google.maps.LatLngBounds 對象,然后在地圖對象上調用該方法。 像這樣:
function initialize_map(places, zoom) {
var bounds = new google.maps.LatLngBounds(); // empty bounds object
// use first coordinates in the json to initiate the map
var place_lat_lng = new google.maps.LatLng(places[0][1],places[0][2]);
var mapOptions = {
zoom: zoom,
center: place_lat_lng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var marker, i;
// loop through all the places to get markers
for (var i=0;i<places.length;i++)
{
var place = places[i];
marker = new google.maps.Marker({
position: new google.maps.LatLng(place[1], place[2]),
map: map,
animation: google.maps.Animation.DROP
});
// add the marker
marker.setMap(map);
bounds.extend(marker.getPosition()); // add the marker to the bounds
}
map.fitBounds(bounds); // show all the markers.
}
這是將標記添加到 LatLngBounds 並抓住框中心的快速方法。 這至少會向您顯示您擁有的所有標記。 矩形和“C”標記用於顯示邊界框和中心的外觀。
var bounds = new google.maps.LatLngBounds();
for (x in beaches) {
var data = beaches[x];
var lat = beaches[x][1];
var lng = beaches[x][2]
var latLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
map: map,
position: latLng
});
markers.push(marker);
bounds.extend(latLng);
}
map.fitBounds(bounds)
new google.maps.Rectangle({
bounds: bounds,
fillColor: '#000000',
map: map
})
var centerBounds = new google.maps.Marker({
map: map,
position: bounds.getCenter(),
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=C|FF0000|000000'
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.