显示坐标的缩放水平谷歌地图

本文关键字：水平 谷歌地图 缩放 坐标 显示 | 更新日期: 2023-09-27 18:17:43

我有一个java脚本代码，我在页面加载上显示坐标。我想在用户缩放级别为15或更高时显示这些坐标而不是在页面加载时显示所有这些坐标。有可能解决这个问题吗?下面是我尝试，但仍然没有击中正确的方式。下面是我正在尝试的脚本，但没有通过

<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>

显示坐标的缩放水平谷歌地图

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

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
    }
}
相关文章：