javascript - 在 map 视口(viewport)中显示所有地理 map 标记

Question

如果有一点指导，我们将不胜感激。

我试图确保所有 map 标记都显示在 map 视口(viewport)中；换句话说，我要求 map 缩放到最接近的缩放值以包含所有指定的标记。

我的代码在从数据库中提取并填充本地区域时可以按预期运行。然后，我必须扩展视口(viewport)区域以包含一个国家/地区，所有标记都显示在边界设置所描述的边界内。

我显然错过了一些东西，因为当我请求 .fitBounds 时 - 除非有一个标记 - 我得到一个世界(0)缩放，因此所有标记重叠直到缩放。

这是我的经典 ASP 和 Javascript 脚本:

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

        function initializeMapping() {
            var txtGeocode = document.getElementById("txtGeocode").value;
            var codepair=txtGeocode.split(",");
            var myOptions = {
                zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: true, zoomControl: true, gestureHandling: 'greedy', center: new google.maps.LatLng(parseFloat(codepair[0]), parseFloat(codepair[1]))
            }

            map = new google.maps.Map(document.getElementById("gmap"), myOptions);

            <%for m = 0 to markercount
                imgCountQry = "select lngPhotoID from tblImages where lngPropertyID = " & markerarr(8,m)
                Set imgrs = conn.execute(imgCountQry)
                if imgrs.bof and imgrs.eof then
                    imgcount = 0
                else
                    imgarr = imgrs.getrows
                    imgcount = ubound(imgarr,2) + 1
                end if
                imgrs.close
                set imgrs = nothing
                fullAddress = markerarr(1,m) & ", " & markerarr(3,m) & ", " & markerarr(4,m) & ", " & markerarr(5,m)
                imageIDtmb = left(markerarr(9,m),len(markerarr(9,m))-4) & "_med.jpg"
                markertext = "<div class='mapballoon'><p>" & fullAddress & "<a target='_blank' href='property-details.asp?pid=" & markerarr(8,m) & "'><br />Visit Property</a><br /><span><b>[&nbsp; ]<i>" & imgcount & "</i></b><img src='adimages/" & imageIDtmb & "' width='250' /></span></p></div>"%>
                createMarker(<%=markerarr(7,m)%>, "<%=markertext%>");
            <%next%>

            fitMarkers()
        };

        function createMarker(lat,lng, html) {
            var newmarker = new google.maps.Marker({position: new google.maps.LatLng(lat,lng), map: map, animation: google.maps.Animation.DROP, title: 'Click to see property', icon: 'images/home-2.png'});
            markers.push(newmarker);

            newmarker['infowindow'] = new google.maps.InfoWindow({maxWidth: 250, content: html});

            google.maps.event.addListener(newmarker, 'click', function() {
            hideInfowindows(map);
            newmarker.setOpacity(0.5);
            this['infowindow'].open(map, this);
            });
        }

        function fitMarkers() {
            for (var i = 0; i < markers.length; i++) {
                bounds.extend(markers[i].getPosition());
            }

            map.setCenter(bounds.getCenter());
//          map.getBounds(map.fitBounds(bounds));
//          map.getBounds(map.getBounds(bounds));
            map.fitBounds(bounds);
            map.getZoom();      
        }

相信我，我花了一整夜的时间寻找解决方案来解决我对 Google map 的明显理解不足的问题，但我现在已经精疲力尽，必须寻求帮助。

提前致谢，

迈克

Answer 1

这可能会有所帮助。创建一个新的边界对象:

var bounds = new google.maps.LatLngBounds();

然后扩展每个标记对象的边界。

bounds.extend(myLatLng);

然后将边界应用到 map :

map.fitBounds(bounds);