Google Map基于SQL数据重复

Question

我的Google地图正在重复。我正在使用Google Map来显示SQL数据库中的所有数据。它显示的位置，但地图正在重复。

Page Scripting

<script type="text/javascript" async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrflvoHatDpAhVhVDE9KEjT-0RHcMT0Bk">
</script>

<script type="text/javascript">
    var markers = [
        <asp:Repeater ID="rptMarkers" runat="server">
            <ItemTemplate>
            {
                "title": '<%# Eval("LocURL") %>',
                "lat": '<%# Eval("Latitude") %>',
                "lng": '<%# Eval("Longitude") %>'
            }
            </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:1,
            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>

HTML

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

服务器侧

public partial class Home : System.Web.UI.Page
{
    String CS = ConfigurationManager.ConnectionStrings["TCDatabaseConnectionString1"].ConnectionString;
    protected void Page_Load(object sender, EventArgs e)
    {
        BindCountry();
        BindCity();
        //bindArea();
        BindCategory();
        if (!this.IsPostBack)
        {
            DataTable dt = this.GetData("select * from tblLocation");
            rptMarkers.DataSource = dt;
            rptMarkers.DataBind();
        }
    }
private DataTable GetData(string query)
{

    SqlCommand cmd = new SqlCommand(query);
    using (SqlConnection con = new SqlConnection(CS))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;

            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                return dt;
            }
        }
    }
}

Answer 1

您可以解决此问题，将缩放值设置为4。

window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 4,
            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);
        }
    }