通过缩放级别谷歌地图显示坐标

时间:2014-08-12 13:35:37

标签: c# asp.net google-maps

我有一个java脚本代码,其中我在页面加载时显示坐标。我想显示那些坐标,如果用户处于15和更高的缩放级别而不是在页面加载中显示所有这些坐标.Is有可能解决这个问题吗?以下是我正在尝试的但仍未达到正确的方法。 下面是我正在尝试但未通过的脚本

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Maps</title>
</head>
<body>
    <form id="form1" runat="server">
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

        <script type="text/javascript">
            var markers = [
        <asp:Repeater Id="rptMarkers" runat="server">
            <ItemTemplate>
                     {
                         "title": '<%# Eval("Title") %>',
                         "lat": '<%# Eval("Latitude") %>',
                         "lng": '<%# Eval("Longitude") %>',
                         "description": '<%# Eval("Description") %>'
                     }
    </ItemTemplate>
    <SeparatorTemplate>
        ,
    </SeparatorTemplate>
    </asp:Repeater>
            ];
        </script>
        <script type="text/javascript">
            var map;
            window.onload = function () {
                var mapOptions = {
                    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                    zoom: 8,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var content='<div id="content" style="Width:150px;Height:40px"></div>'
                var infoWindow = new google.maps.InfoWindow(
                    {
                        content:content,
                        width:80,
                        Height:80

                    });
                map = new google.maps.Map(document.getElementById("Map"), mapOptions);
                for (i = 0; i < markers.length; i++) {
                    var data = markers[i]
                    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: data.title
                    });

                    google.maps.event.addListener(map,"zoom_changed",function(){
                        if(map.getZoom()>15)
                        {

                             //this is where am hoping to display my coordinates
                      }

                    });







                    (function (marker, data) {
                        google.maps.event.addListener(marker, "click", function (e) {
                            infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                        });
                        marker.setMap(map);
                        marker.setAnimation(google.maps.Animation.DROP)
                    })(marker, data);
                }
            }
        </script>
`enter code here`        <br />
        <div id="Map" style="width: 1050px; margin-left: 90px; height: 800px">
        </div>
    </form>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

如果每个标记在当前缩放级别可见,您可以轻松检查。

var markers; // your markerarray
var map; // your map
for (var i=0; i<markers.length; i++){
    if( map.getBounds().contains(markers[i].getPosition()) ){

       // only load markers which are currently visible in this zoom level

    }
}