基于 SQL 数据的谷歌地图重复答案

【问题标题】：Google Map repeating based on SQL data基于 SQL 数据的谷歌地图重复
【发布时间】：2017-08-07 13:38:36
【问题描述】：

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

页面脚本

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

【问题讨论】：

这是典型的。而且无法避免。您正在使用缩放：1 .. 尝试使用另一个缩放：3 或 4

标签： javascript asp.net google-maps

【解决方案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);
        }
    }

【讨论】：