2

Bom dia pessoal,

Estou desenvolvendo uma aplicação web em C# que utiliza o GMAPS para adição de comentários em endereços.

Tenho uma página na qual o usuário insere os comentários (e a página captura latitude e longitude) e salva num banco de dados MySql.

Achei um tutorial bem bacana que mostra como inserir os pontos através de um documento JSON.

O problema é que no arquivo JSON do tutorial, a latitude e longitude são adicionadas manualmente no JSON e no meu caso, preciso adicionar os pontos vindos do banco de dados.

Segue meu código:

index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="testeMapa.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/estilo.css">
<title></title>
</head>
<body>
<form id="form1" runat="server">

    <div id="mapa" style="height: 500px; width: 700px">
    </div>

    <script src="js/jquery.min.js"></script>

    <!-- Maps API Javascript -->
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false">               </script>

    <!-- Caixa de informação -->
    <script src="js/infobox.js"></script>

    <!-- Agrupamento dos marcadores -->
    <script src="js/markerclusterer.js"></script>

    <!-- Arquivo de inicialização do mapa -->
    <script src="js/mapa.js"></script>

    <asp:GridView ID="gvTeste" runat="server"></asp:GridView>
    <asp:Label ID="lblteste" runat="server" Text="Label"></asp:Label>
</form>
</body>
</html>

index.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Web.Services;
using System.Web.Script.Services;
using System.Web.Script.Serialization;
using System.Data;
using MySql.Data.MySqlClient;
using System.Reflection;

namespace testeMapa
{
public partial class index : System.Web.UI.Page
{
    private MySqlConnection mConn;
    private MySqlDataAdapter mAdapter;
    private DataSet mDataSet;

    protected void Page_Load(object sender, EventArgs e)
    {

        mConn = new MySqlConnection("server=192.185.176.186;User Id= ***** ;database=ondli012_buscmob; password=****");
        mConn.Open();

        MySqlCommand com = new MySqlCommand();
        com.Connection = mConn;
        com.CommandText = "Select idDado, latitudeEnd, longitudeEnd, enderecoDado from inserirDados";
        MySqlDataReader dr = com.ExecuteReader();
        DataTable dt = new DataTable();
        dt.Load(dr);




    }

                  [WebMethod]
    static public string Carregar(DataTable dt )
    {


        JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
        List<Dictionary<string, object>> parentRow = new List<Dictionary<string, object>>();
        Dictionary<string, object> childRow;
        foreach (DataRow row in dt.Rows)
        {
            childRow = new Dictionary<string, object>();
            foreach (DataColumn col in dt.Columns)
            {
                childRow.Add(col.ColumnName, row[col]);
            }
            parentRow.Add(childRow);
        }

            var pontos = jsSerializer.Serialize(parentRow);


            return pontos;

        }
        }
    }

E por fim o Javascript:

var map;
var idInfoBoxAberto;
var infoBox = [];
var markers = [];

function initialize() {
var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);

var options = {
    zoom: 5,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("mapa"), options);
}

initialize();

function abrirInfoBox(id, marker) {
if (typeof (idInfoBoxAberto) == 'number' && typeof    (infoBox[idInfoBoxAberto]) == 'object') {
    infoBox[idInfoBoxAberto].close();
}

infoBox[id].open(map, marker);
idInfoBoxAberto = id;
}

function carregarPontos() {



    $.ajax({
        type: 'POST',
        url: '/index.aspx/Carregar',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (pontos) {

            var latlngbounds = new google.maps.LatLngBounds();

            $(pontos).each(function (i) {

                var lat = pontos[i].latitudeEnd;
                var long = pontos[i].longitudeEnd;
                var endereco = pontos[i].enderecoDado;
                var idDados = pontos[i].idDado;

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat, long),
                    title: "Meu ponto personalizado! :-D",
                    icon: 'img/marcador.png'
                });

                var myOptions = {
                    content: "<p>" + endereco + "</p>",
                    pixelOffset: new google.maps.Size(-150, 0)
                };

                infoBox[idDados] = new InfoBox(myOptions);
                infoBox[idDados].marker = marker;

                infoBox[idDados].listener =    google.maps.event.addListener(marker, 'click', function (e) {
                    abrirInfoBox(idDados, marker);
                });

                markers.push(marker);

                latlngbounds.extend(marker.position);

            });

            var markerCluster = new MarkerClusterer(map, markers);

            map.fitBounds(latlngbounds);

        }  });

}

carregarPontos();

Testei o retorno do JSON e fica assim:

[
{
"idDado": 11,

"latitudeEnd": "-22.8668838",
"longitudeEnd": "-43.307824100000005",
"enderecoDado": "R. Limeira, 16 - Tomás Coelho, Rio de Janeiro - RJ, 21370-  460, Brasil"
},
{
"idDado": 10,
"latitudeEnd": "-22.9501581",
"longitudeEnd": "-43.18422179999999",
"enderecoDado": "Botafogo - Botafogo, Rio de Janeiro - RJ, Brasil"
},
{
"idDado": 24,
"latitudeEnd": "-20.1940458",
"longitudeEnd": "-44.935004400000025",
"enderecoDado": "R. Limeira - Floresta, Divinópolis - MG, Brasil"
},
{
"idDado": 17,
"latitudeEnd": "-22.878278665030688",
"longitudeEnd": "-43.2732975914364",
"enderecoDado": "Av. Pastor Martin Luther King Junior, 4667-4713 - Inhaúma, Rio de Janeiro - RJ, Brasil"
}
]

Se copio esse retorno e coloco num arquivo .JSON e altero o javascript, ele funciona perfeitamente... mas se tento pegar do JSON criado dinamicamente, não carrega os pontos..

Alguém tem alguma luz?

Obrigado desde já!

1
  • Já tentou dá um parse nos dados e tranformar em um array?
    – Marconi
    13/10/2015 às 11:37

1 Resposta 1

1

Acredito que o problema esteja no retorno do seu método Carregar(). O JavascriptSerializer retorna uma JSON string, e não um objeto JSON.

Para você poder manipular o JSON de retorno, você precisa antes fazer um parse:

var pontosJson = JSON.parse(pontos);

Além disso, não utilize $(pontos).each(function (i) {}) para iterar sob uma array e/ou objeto, essa função do jQuery é apenas para iterar sob elementos jQuery. O correto é utilizar a função $.each (http://api.jquery.com/jquery.each/), que é própria para objetos e arrays:

$.each(pontos, function(i, ponto) {

});
7
  • o parse eu faço antes de retornar no CodeBehind ou no java? 13/10/2015 às 15:38
  • Você faz no javascript, logo após ter retorno da chamada ajax, na função success
    – alvarodms
    13/10/2015 às 16:06
  • nada aconteceu =( não sei se fiz certo: ' success: function (pontos) { var pontosJson = JSON.parse(pontos); pontos = pontosJson;' 14/10/2015 às 10:16
  • Já verificou se o método Carregar() está realmente retornando um JSON corretamente? Ele espera receber um objeto do tipo DataTable, mas pelo que vi sua chamada Ajax não está passando esse parâmetro. Na função success, dê um console.log(pontos) e veja se realmente o JSON está sendo retornado.
    – alvarodms
    14/10/2015 às 11:37
  • eu percebi isso e corrigi.. criei uma variavel global DT e retirei o parametro de Carregar.. para facilitar, coloquei na web buscmob.somee.com/listaDados.aspx/Carregar 14/10/2015 às 12:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .