2012-12-01 84 views
0

我的谷歌地图API地图缩放显示谷歌地方搜索后添加的所有标记。在移动地图上,这可能需要一些时间来加载,因为这个应用程序我喜欢只在视口中显示结果。我读到的大多数研究表明,仅在视口内返回结果是不可能的。添加标记之后,我能否保持地图边界不变?如果只显示添加到当前界限的标记,除非只有一个标记返回,否则将会很好,那么它应该放大该标记。因此,搜索比萨饼这样的东西将在当前视口中显示许多比萨饼位置而不进行平移或缩放。搜索特定地址将缩放到该标记,即使它位于视口之外。界限谷歌地图

var input = document.getElementById('target'); 
var searchBox = new google.maps.places.SearchBox(input); 
var bounds = map.getBounds(); 
searchBox.setBounds(bounds); 
var markers = []; 
service = new google.maps.places.PlacesService(map); 

google.maps.event.addListener(searchBox, 'places_changed', function() { 
    var places = searchBox.getPlaces(); 
    // alert("getPlaces returns "+places.length+" places"); 

    for (var i = 0; i < gmarkers.length; i++) { 
     gmarkers[i].setMap(null); 
    } 

    gmarkers = []; 
    var bounds = new google.maps.LatLngBounds(); 

    for (var i = 0, place; place = places[i]; i++) { 
     var place = places[i]; 
     createMarker(place); 
     bounds.extend(place.geometry.location); 
    } 
    map.fitBounds(bounds); 
    // if (markers.length == 1) map.setZoom(17); 
    }); 

    google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = map.getBounds(); 
    searchBox.setBounds(bounds); 
    }); 

    ib = new InfoBox({}); 
+0

这听起来很容易实现。你有什么问题呢?您的代码当前被编写为缩放以显示所有返回的标记。 – geocodezip

+0

我的主要问题是这是我的第一个项目,我仍在学习。就代码问题而言,我相信bounds.extend(place.geometry.location);正在使用我的空边界变量,并给它一个经度和长度,将显示所有的标记。然后map.fitBounds(边界)实际上是使用该边界来调整地图大小以显示所有标记。我尝试过注释map.fitBounds,它似乎使地图不会移动,但并非总是如此。如果添加的标记超出了当前界限,if语句也只会放大。 – Rick

回答

1

的回答你的问题:

  • 它可能对我来说只保留地图范围从添加标记后改变?

是的。正如你所说,涉及到删除map.fitBounds。

要使地图居中并放大单个地址,请使用地理编码器(单独实施)或检查结果数量(如果结果为1),将结果放在结果中心,如果存在在结果中建议的视口,使用它来居中放大地图[使用map.fitBounds(place.geometry.viewport)我认为]。

+0

我试图删除map.fitBounds和更改视口如果marker.length == 1的功能。这适用于某些搜索,但地图边界仍然会改变一些时间。似乎Google搜索框API正在努力保留地图视口。 – Rick

+0

你的代码是居中和缩放地图。发布展示该问题的代码(jsfiddle可能是最好的)。 – geocodezip