Google Map API v3 - 设置边界和中心 [英] Google Map API v3 — set bounds and center
问题描述
我最近切换到Google Maps API V3。我正在绘制一个简单示例，它可以绘制数组中的标记，但我不知道如何自动对标记进行居中和缩放。
我已经搜索了包括谷歌自己的文档在内的最高和最低网页，但还没有找到明确的答案。我知道我可以简单地取坐标的平均值，但是我如何设定相应的缩放比例？ c $ c> 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（地图，海滩）;
}
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海滩'，-33.450198,151.259302,1]
];
函数setMarkers（地图，位置）{
var image = new google.maps.MarkerImage（'images / beachflag.png'，
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'，
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，20，18，20，18，1]，
类型：'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，
形状：形状，
标题：沙滩[0]，
zIndex：沙滩[3]
}）;
}
}
Got所有东西都被排序 - 查看最后几行代码 - （ 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（地图，海滩）;
}
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'，
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，20，18，20，18，1]，
类型：'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，
形状：形状，
标题：沙滩[0]，
zIndex：沙滩[3]
}）;
bounds.extend（myLatLng）;
}
map.fitBounds（bounds）;
}
I've recently switched to Google Maps API V3. I'm working of a simple example which plots markers from an array, however I do not know how to center and zoom automatically with respect to the markers.
I've searched the net high and low, including Google's own documentation, but have not found a clear answer. I know I could simply take an average of the co-ordinates, but how would I set the zoom accordingly?
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]
});
}
}
Got everything sorted - see the last few lines for code - (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);
}
这篇关于Google Map API v3 - 设置边界和中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
