Sanjeev236 Ответов: 0

Как обновить маркеры Google map в updatepanel?

Я хочу обновить маркеры на карте google. Google map div находится внутри панели обновления. Я пытался вызвать функцию map loading JavaScript различными способами, но безуспешно. функция вызывается, но карта показывает только старые маркеры, а не обновленные. Чтобы восстановить сценарий, я делаю это на ТИКе таймера ниже. Ontick, repeater datasource table обновляется, но не маркеры данных.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Key"></script>
        <script type="text/javascript">
            var markers = [
            <asp:Repeater ID="rptMarkers" runat="server">
            <ItemTemplate>
                     {
                         "title": '<%# Eval("Name") %>',
                         "lat": '<%# Eval("Latitude") %>',
                         "lng": '<%# Eval("Longitude") %>',
                         "description": '<%# Eval("Description") %>'
                     }
    </ItemTemplate>
    <SeparatorTemplate>
        ,
    </SeparatorTemplate>
            </asp:Repeater>
            ];
        </script>
        <script type="text/javascript">
            window.onload = function () {
                LoadMap();
            };
            //On UpdatePanel Refresh
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function (sender, e) {
                    if (sender._postBackSettings.panelsToUpdate != null) {
                        LoadMap();
                    }
                });
            };
            function LoadMap() {
                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++) {
                    // alert(markers[i].description);
                    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>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Timer ID="Timer1" runat="server" Interval="30000" OnTick="Timer1_Tick">
                </asp:Timer>
                <div id="dvMap" style="width: 500px; height: 500px">
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>


Ниже приведен мой код позади:

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = this.GetData("SELECT top 2 Name,lat as Latitude,long as Longitude,id as Description FROM tma_dump2 where city='Delhi' and id>10 ORDER BY Id");
        rptMarkers.DataSource = dt;
        rptMarkers.DataBind();
    }
}
protected void Timer1_Tick(object sender, EventArgs e)
{
    DataTable dt = this.GetData("SELECT top 2 Name,lat as Latitude,long as Longitude,id as Description FROM tma_dump2 where city='Mumbai' and id>10 ORDER BY Id");
    rptMarkers.DataSource = dt;
    rptMarkers.DataBind();
    UpdatePanel1.Update();
}


private DataTable GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["TMA"].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;
            }
        }
    }
}


Очевидно, что я делаю что-то ужасно неправильное. Пожалуйста, просветите меня.

Что я уже пробовал:

Я старался изо всех сил, чтобы решить это дело, но не получил никакой подсказки отсюда.

0 Ответов