Question

我有以下代码，我试图只在地图下显示实际显示在地图上的项目，例如，如果我放大其中一个位置而另一个位置不再显示在地图上不再显示在地图下方的列表上。是否可以使用我目前的代码？

提前谢谢。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var map;
var markers = [];
var lastinfowindow;
var locIndex;

if ( !Array.prototype.forEach ) {
  Array.prototype.forEach = function(fn, scope) {
    for(var i = 0, len = this.length; i < len; ++i) {
      fn.call(scope, this[i], i, this);
    }
  }
}

var data = [
{address:'London Bridge Railway Station Tooley Street London SE1 2SW',title:'Address 1',type:''},
{address:'12 Millbank London SW1P 4QE',title:'Address 2',type:'work'}
];

function getIcon(type) {
    switch(type) {
        case "pharmacy": return "icons/drugstore.png";
        case "hospital": return "icons/hospital-building.png";
        case "work": return "icons/work.png";
        default: return "icons/footprint.png";
    }
}

function initialize() {
    var latlng = new google.maps.LatLng(51.149087, 0.436707);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

    geocoder = new google.maps.Geocoder();

    data.forEach(function(mapData,idx) {
        geocoder.geocode( { 'address': mapData.address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var marker = new google.maps.Marker({
                        map: map, 
                        position: results[0].geometry.location,
                        title: mapData.title,
                        icon: getIcon(mapData.type)
                    });
                    var contentHtml = "<div style='width:300px;height:200px'><h3>"+mapData.title+"</h3>"+mapData.address+"</div>";
                    var infowindow = new google.maps.InfoWindow({
                        content: contentHtml
                    });
                    google.maps.event.addListener(marker, 'click', function() {
                      infowindow.open(map,marker);
                    });
                    marker.locid = idx+1;
                    marker.infowindow = infowindow;
                    markers[markers.length] = marker;

                    var sideHtml = '<p class="loc" data-locid="'+marker.locid+'"><b>'+mapData.title+'</b><br/>';
                         sideHtml += mapData.address + '</p>';
                         $("#locs").append(sideHtml); 

                }
            });

    });

    $(document).on("click",".loc",function() {
        var thisloc = $(this).data("locid");
        for(var i=0; i<markers.length; i++) {
            if(markers[i].locid == thisloc) {
                if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
                map.panTo(markers[i].getPosition());
                markers[i].infowindow.open(map, markers[i]);
                lastinfowindow = markers[i].infowindow;
            }
        }
    });

}
</script>
<style>
#map_canvas { 
    width: 100%; height: 400px; 
}
#locs {
    margin-top: 0px;
    padding-top: 0px;
    height: auto;
}
#locs p {
    float:left;
    margin:5px;
}
.loc {
    border-style:solid;    
    border-width:thin; 
    width: 300px;
    padding: 5px;  
    cursor:pointer; 
    margin-top:0px;
}
label {
    width: 200px;
    padding: 5px;  
}

</style>
</head>
<body onLoad="initialize()">

<div id="map_canvas"></div>

<div id="locs"></div>

</body>
</html>

Answer 1

您可以从Map对象中获取LatLngBounds，然后检查您的其他点是否包含在边界中。

所以在你的click处理程序中：

// Get the LatLngBounds object
var latlngbounds = map.getBounds();

// loop through the markers
for(var i=0, j=markers.length; i<j; i++) {

    // check if marker is contained in bounds
    if(!latlngbounds.contains(markers[i].getPosition())) {

         // if not, remove from map
         markers[i].setMap(null);
    }
}

如何使用.getBounds（）函数使用以下代码？

1 个答案: