无法在Google Maps API v3上显示约2000-2500个标记

I have a table that contains about 2500 records and each record have their respective Latitude and Longitude values. Next is that i'm retrieving all the Latitude and Longitude values of each record and displaying the markers on google maps version 3. The code works fine if i select top let's say 200-250 records. But when i select all rows the markers do not display.In fact the map itself does not display.

我有一个包含大约2500条记录的表,每条记录都有各自的纬度和经度值。接下来是我正在检索每条记录的所有纬度和经度值,并在谷歌地图版本3上显示标记。如果我选​​择顶部让我们说200-250记录,代码工作正常。但是当我选择所有行时,标记不会显示。实际上地图本身不会显示。

protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = this.GetData("select top 250 * from tblEarthquake");
            rptMarkers.DataSource = dt;
            rptMarkers.DataBind();
        }
    }

    private DataTable GetData(string query)
    {
        string conString = ConfigurationManager.ConnectionStrings["EarthquakeCS"].ConnectionString;
        SqlCommand cmd = new SqlCommand(query);
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    return dt;
                }
            }
        }
    }


<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxHKyDx5Kl4XJBRdau_kbTqB_G5gB-z2c&sensor=false"></script>
<%--<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("Location") %>',
        "lat": '<%# Eval("Latitude") %>',
        "lng": '<%# Eval("Longitude") %>',
        "description": '<%# Eval("Magnitude") %>'
        }
    </ItemTemplate>
        <SeparatorTemplate>
        ,
    </SeparatorTemplate>
    </asp:Repeater>
    ];
</script>
<script type="text/javascript">
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 8//,
            //mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("dvMap"), 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
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
    }
</script>

<div id="dvMap" style="width: auto; height: 500px">
</div>

1 个解决方案

#1

The lat/lng values for markers should be floating point numbers. You're wrapping them in '...' i.e. creating strings.

标记的lat / lng值应为浮点数。你将它们包装在'...'中,即创建字符串。

Change:

{
    "title": '<%# Eval("Location") %>',
    "lat": '<%# Eval("Latitude") %>',
    "lng": '<%# Eval("Longitude") %>',
    "description": '<%# Eval("Magnitude") %>'
}

to:

{
    "title": '<%# Eval("Location") %>',
    "lat": <%# Eval("Latitude") %>,
    "lng": <%# Eval("Longitude") %>,
    "description": '<%# Eval("Magnitude") %>'
}