从一组坐标中,我如何决定地图的居中位置
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: latlnbounds) - None -设置视口包含给定的边界。
将所有标记添加到google.maps. latlnbounds对象中,然后在地图对象上调用该方法。这样的:
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.
}
这里有一个快速的方法来添加标记到latlnbounds并抓取框的中心。这至少能让你看到所有的标记。矩形和"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'
});
相关文章:
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- 在谷歌地图上获取事件的x,y坐标
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 模拟谷歌地图中的点击
- 如何知道哪个标记被谷歌地图点击了
- 谷歌地图JS API+JSON-多个标记没有显示
- 缓存谷歌地图数据
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 在谷歌地图上绘制位置数据库
- 标记的实时更新,无需加载页面谷歌地图API V3
- 在地图上画一条路线
- 从一组坐标中,我如何决定地图的居中位置