Question

我正在使用jQuery 1.7和最新的jQuery Mobile以及Google Maps Places库。

我遇到的问题类似于折线上的this问题，除了我没有使用（如果可能的话，更愿意不使用）任何插件。

单击一个页面上的按钮可填充同一文档中另一页面上的地图。

我试图通过使用下面的代码片段尽可能清晰地显示我的所有搜索结果。

var bounds = new google.maps.LatLngBounds();
for(var i=0; i<results.length; i++)
{
    var resCoOrds = new google.maps.LatLng(results[i].geometry.location.lat(), results[i].geometry.location.lng());
    var marker = new google.maps.Marker({
        position : resCoOrds, 
        map : myMap, 
        icon: myMarkerIcon
    });

    makerList.push(marker);

    google.maps.event.addListener(marker, 'click', function()
    {
        var resInfoWindow = new google.maps.InfoWindow({content:liContent});
        resInfoWindow.open(map, this);
    });


    bounds.extend(resCoOrds);
    myMap.fitBounds(bounds);
}

我的问题是上一行的结果！

第一个标记的添加按预期工作，但添加第二个标记后，地图会缩小显示，使我的所有搜索结果一起显示在地图上的一个小点上，迫使用户放大，这不会为我的目的服务..

时，相同的代码不会发生此缩小

不使用jQuery Mobile !!
地图与使用标记填充地图的“搜索”按钮位于同一页面

非常感谢任何帮助或指示..

提前致谢..

此致

阿舒

Answer 1

你的代码中还有另一个错字：

var resCoOrds = new google.maps.LatLng(results[i].geometry.location.lat(), results[i].geometry.location.lng;

应该是：

var resCoOrds = new google.maps.LatLng(results[i].geometry.location.lat(), results[i].geometry.location.lng());

虽然使用results[i].geometry.location会更简单，因为它已经是google.maps.LatLng：

var resCoOrds = results[i].geometry.location

Answer 2

想出来......

这是我的解决方案：我注意到，如果地图已经加载并且在我开始添加标记或调用map.fitBounds()时在活动页面上可见，则不会出现缩放问题。所以我使用地图的tilesloaded事件等到地图准备就绪，然后添加标记＆amp;适合界限。

以下是我使用的代码......

function searchCallback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) 
    {
        if (results.length) 
        {
            $.mobile.changePage("#mapview");
            google.maps.event.addListenerOnce(map, "tilesloaded", function()
            {
                var bounds = new google.maps.LatLngBounds();
                for ( var i = 0; i < results.length; i++) 
                {
                    /* code to add markers */
                    bounds.extend(results[i].geometry.location);
                }
                map.fitBounds(bounds);
            }   
        }
     }
 }

这种方法解决了我的问题，但如果有人有更好的解决方案，请告诉我..

谢谢..

第二标记＆amp; map.fitBounds（）与jquery mobile导致巨大的缩小

2 个答案: