+ Rispondi al messaggio
Pagina 1 di 2 12 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 16

[Javascript] Problema nel disegnare marker google maps

  1. #1
    UGoldrake non è in linea Scolaretto
    Salve a tutti.
    Il problema di oggi è che non riesco a disegnare i marker in una mappa di google in una pagina web, aspx.
    Uso VS 2010; sulla pagina ho un pulsante
    <asp:Button runat="server" Text="Disegna marker" ID="btnDisPunti" />
    
    che avvia la funzione di disegno di un elenco di marker.
    Questo pulsante, che lavora in VB.net, prende i valori da un db postgres,
    Dim connString = ConfigurationManager.ConnectionStrings("NpgsqlConnection").ConnectionString
    
    e, dopo opportune query, li passa con una stringa al lato client in javascript.
    Ho studiato il sito developers di google maps, e un po' da lì e un po' in giro, ho capito come devo far passare i dati in maniera da ottenere la mappa con i marker.
    Dim CoordPunti As String
                    CoordPunti = "DisegnaPunti('" + strPunti + "');"
                    ClientScript.RegisterStartupScript(Me.GetType, "", CoordPunti, True)
    
    Tenete presente che Puntis[i] è la latitudine e Puntis[i+1] è la longitudine
           function DisegnaPunti(Punti) {
                geocoder = new google.maps.Geocoder();
                //crea l'array dalla stringa passata da vb.net
                var Puntis = Punti.split(",").map(String);
                //ciclo che disegna i Punti
                var posto;
                for (var i = 0; i != Puntis.length; i = i + 2) {
                    //alert(Puntis[i])
                    posto = '(' + parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]) + ')';
                    geocoder.geocode({ 'address': '(' + parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]) + ')' }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            map.setZoom(18);
                            var marker = new google.maps.Marker({
                                map: map,
                                location: parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]), //parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]),
                                icon: 'Immagini/mm_20_red.png',
                                title: 'Coordinate: ' + Puntis[i] + ', ' + Puntis[i + 1] + ' - ' + results[0].geometry.location
                            }); //chiude var marker
                            //                    alert(results[0].geometry.location)
                        } else {
                            alert('Ciao - Geocode was not successful for the following reason: ' + status);
                        } //chiude if
                    }); //chiude geocoder
                } //chiude for
            } //chiude function
    
    Il problema sta nella parte in rosso perché con opportuni alert ho individuato cosa fa e cosa no.
    Oltre a tutto quella parte, estrapolata e messa per conto suo in una function a parte e passandogli un solo valore LatLng per volta, fa il suo dovere.
    Su developer, ho capito che c'è differenza tra scrivere address e position, piuttosto che location, ma non c'è verso, ho provato tutte le combinazioni possibili, ad un certo punto smetti di pensare alla logica e ti affidi alla fortuna. non ho avuto fortuna.
    I punti li ho passati in diversi modi a location: di var marker
    '(' + parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]) + ')'
    parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1])
    Puntis[i] + ', ' + Puntis[i + 1]
    results[0].geometry.location (visto che imposta il map.setcenter ho detto ti metti al centro, trovi il centro e mi metti il marker, è assurdo, ma quando sei alla frutta la macedonia è completa).
    Ho anche usato la proprietà title: per avere un riscontro, ma non disegnandomi il marker, non riesco neppure a vedere l'etichetta.
    Cercasi suggerimenti o spiegazioni del perché non disegna.
    Grazie a tutti. Ugo.

  2. #2
    UGoldrake non è in linea Scolaretto
    Scusate se insisto.
    Negli ultimi 10 giorni ho sperimentato diverse righe di codice, e mentre in ogni dove c'è scritto di usare il codice che vi ho postato, da me non funziona.
    Non funziona neppure se imposto la stringa delle API sulla versione 2 oppure sulla 3.
    Non riesco a comprendere perché le variabili che contengono le coordinate non vengano lette dalla proprietà location o position all'interno del codice che definisce var marker:

    var marker = new google.maps.Marker({
                                map: map,
                                position: parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]),
                                icon: 'Immagini/mm_20_red.png',
                                title: 'Coordinate: ' + Puntis[i] + ', ' + Puntis[i + 1] + ' - ' + results[0].geometry.location
                            }); //chiude var marker
    
    Nell'esempio ho inserito il title per controllare che le variabili siano passate correttamente, ma niente.
    Qualche idea?
    Grazie, Ugo.

  3. #3
    L'avatar di bottomap
    bottomap non è in linea Amanuense
    Ciao,

    Premesso che non conosco il sistema in questione direi di controllare:
    - che il sistema di API sia disponibile e funzioni correttamente (controlla di non avere errori di script e/o di non avere estensioni/plugin del browser che possano interferire).
    - che il punto non sia finito per caso in una locazione classica (incontro di equatore e meridiano di greenwich 0,0 oppure ai poli), segno che qualcosa non va con le variabili.
    - che il file Immagini/mm_20_red.png sia disponibile.
    - che la cosa non dipenda dal contenuto delle variabili, impostando manualmente le coordinate di un punto e verificando se compare o meno.
    - che stringa viene fuori da parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]) e se è coerente con le API per le posizioni (per quanto ne so dovrebbe essere latitudine +-90, longitudine +-180). Occhio anche a non aver invertito le due coordinate, se il punto è in Italia il range sarebbe comunque valido, ma il punto finirebbe più o meno in Etiopia ([12,42] invece di [42,12]).

    Da quello che ho letto superficialmente poi, gli esempi usano un oggetto google.maps.LatLng per la position... sei sicuro che una stringa vada altrettanto bene?
    ℹ️ Leggi di più su bottomap ...

  4. #4
    UGoldrake non è in linea Scolaretto
    Grazie della risposta Bottomap.
    Per quanto riguarda le API spero sia tutto giusto, comunque non mi dà errori, e il codice le supera senza problemi, almeno mi pare.
    Le coordinate sono giuste e non vanno né in Africa, né all'equatore, ho controllato.
    Su parseFloat ho controllato come vanno inseriti i valori, anche se i dubbi restano, le coordinate vanno inserite con il punto per i decimali e la virgola tra Lat e Long, se con parseFloat o no, boh, ho fatto le prove e non funziona in nessuna maniera, non funge neppure se le metto tra parentesi e neppure senza le parentesi '(' lat, long ')'.
    Però non funziona perché non arriva neppure lì. Si ferma prima:

                for (var i = 0; i != Puntis.length; i = i + 2) {
                    alert(Puntis[i])  // qui le variabili hanno un valore
                    posto = '(' + parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]) + ')';
                    geocoder.geocode({ 'address': '(' + parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]) + ')' }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            map.setZoom(18);
                    alert(Puntis[i])  // qui invece no
                            var marker = new google.maps.Marker({
                                map: map,
                                position: parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]),
                                icon: 'Immagini/mm_20_red.png',
                                title: 'Coordinate: ' + Puntis[i] + ', ' + Puntis[i + 1] + ' - ' + results[0].geometry.location
                            }); //chiude var marker
    
    ma non capisco perché; il secondo alert da valore "undefined", quindi il codice non arriva a valutare quel pezzo e ritornare un valore alle variabili in quel punto.

            function DisegnaPunti(Punti) {
                geocoder = new google.maps.Geocoder();
                //crea l'array dalla stringa passata da vb.net
                var  Puntis =  Punti.split(",").map(String);
                var posto;
                //            alert( Puntis.length)
                //ciclo che disegna i punti
                for (var i = 0; i !=  Puntis.length; i = i + 2) {
                    //alert( Puntis[i])
                    posto = '(' +  Puntis[i] + ', ' +  Puntis[i + 1] + ')';
                    geocoder.geocode({ 'address': posto }, function (results, status) {
                        alert('(' +  Puntis[i] + ', ' +  Puntis[i + 1] + ')')
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            map.setZoom(18);
                            var marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location,
                                icon: 'Immagini/mm_20_red.png',
                                title: 'Coordinate: ' + posto //results[0].geometry.location
                            }); //chiude var marker
                            //alert(results[0].geometry.location)
                        } else {
                            alert('Ciao - Geocode was not successful for the following reason: ' + status);
                        } //chiude if
                    }); //chiude geocoder
                } //chiude for
            } //chiude function
    
    Questo codice invece, mi disegna i punti. Ne ho verificato uno e lo sballa di circa 50 metri in latitudine e 100 in longitudine.
    Valutando altre applicazioni che usano le stesse coordinate, i valori sono corretti.
    Per verificarli ho anche inserito il title, in questo esempio disegna 5 punti, ma ogni title ripete solo l'ultimo valore dei 5 che passano. Perché ne passa uno solo, gli altri no?
    Se mi passasse il valore giusto, potrei andare avanti e inserire le altre informazioni che intendo legare all'etichetta, ma in questo modo mi troverei 5 etichette uguali, che me ne faccio?
    Position prende il valore del centro mappa, credo, ma a parte che è insensato il procedimento, è insensato anche che su title la variabile POSTO abbia un valore, mentre se la metto su position sia 'undefined'.

    Qualche altra idea, per piacere, perché non so da che parte rivoltare questo calzino a forma di codice.
    Ciao e grazie ancora, Ugo.
    Ultima modifica di UGoldrake; 11-02-2014 11:40 

  5. #5
    L'avatar di bottomap
    bottomap non è in linea Amanuense
    Ciao,

    A me continua a non tornare molto questa scrittura:
    position: parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]),
    Gli esempi in giro usano un oggetto di tipo LatLng (ignoro di che tipo sia geometry.location, ma ho idea che anch'esso sia un LatLng).
    Quella che stai accodando alla "position:" è invece una String.

    Hai provato, come negli esempi di base sui Simple Markers, a creare il tuo oggettino latlong a partire direttamente dalle posizioni, senza parsefloat e senza creare stringhe intermedie?
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    ...
    position: myLatlng,
    Nel secondo codice inoltre usi results[0].geometry.location per la position. Non saprei dire cosa sia results[0], ma sarebbe probabilmente il caso di approfondire.
    ℹ️ Leggi di più su bottomap ...

  6. #6
    UGoldrake non è in linea Scolaretto
    Ciao Bottomap,
    ho provato veramente tutte le combinazioni possibili, su position ho messo
    '(' + parseFloat(Puntis[i] + ', ' + parseFloat(Puntis[i+1] + ')' stringa - oppure
    posto = '(' + Puntis[i] + ', ' + Puntis[i+1] + ')' stringa passata in variabile - oppure
    new google.maps.latlng ( e qui dentro ho messo tutte le combinazioni sopra indicate ) ed anche due numeri
    new google.maps.latlng (42, 12) - sempre nulla - oppure
    new google.maps.latlng (Puntis[1] , Puntis[i+1]) - oppure
    (Puntis[1] , Puntis[i+1]) - non stringa, come dici tu: latlng che caspita di tipo sarà? boh.

    Ma quello che mi fa arrabbiare è che questo funziona:
            function GetCentroMappa() {
                geocoder = new google.maps.Geocoder();
                var CentroMappa = map.getCenter()
                    var marker = new google.maps.Marker({
                    map: map,
                    position: CentroMappa,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                });
                alert(CentroMappa)
            }
    
    Mi son detto, prendo questa function, ci cambio nome, ci aggiungo l'argomento che sarebbe la stringa che contiene le coordinate, e ci metto un ciclo FOR che me le disegni. Non c'è verso. Questa funziona, se faccio quello che ho scritto ora, non disegna nulla.
    Cerco ancora. Grazie del sostegno, Ugo.

  7. #7
    L'avatar di bottomap
    bottomap non è in linea Amanuense
    Ciao,

    Riguardo a LatLng (occhio che è case sensitive, come tutto il resto - new google.maps.latlng non crea l'oggetto che ti interessa), si direbbe semplicemente un oggetto contenente i due valori di latitudine e longitudine: https://developers.google.com/maps/d...ference#LatLng

    Riguardo al Marker, sembrerebbe proprio volere un elemento di tipo LatLng, visto il metodo getPosition (https://developers.google.com/maps/d...ference#Marker) e le sue properties, tra cui la position: (https://developers.google.com/maps/d...#MarkerOptions). Escluderei quindi di potergli passare una stringa come facevi nel codice del primo post.

    Il codice dell'ultimo esempio mi pare sbagliato. Manca un ; dopo la prima getCenter() e l'indentazione sembra sballata.

    Mi sembra più che altro che sia sbagliato l'uso del Geocoder in sé... questo è il tipo di parametri che riceve: https://developers.google.com/maps/d...eocoderRequest e questo è l'oggetto: https://developers.google.com/maps/d...rence#Geocoder
    Non mi pare tu voglia eseguire una ricerca sulla mappa, piuttosto vuoi aggiungere punti alla stessa.
    La function del geocoder ( geocode() ) che vai a riscrivere serve ad utilizzare i risultati della ricerca (che stanno nell'array results che abbiamo già menzionato).
    ℹ️ Leggi di più su bottomap ...

  8. #8
    UGoldrake non è in linea Scolaretto
    Ciao, è giusto tutto quello che hai detto:
    devo inserire i punti sulla mappa e non ricavarne, il getPosition in effetti serve all'esempio perché poi su position ci mette CentroMappa; quindi il Geocoder non mi serve: almeno un punto abbiamo chiarito che non mi serve... yuppiii!

    L' alert(CentroMappa) mi restituisce questo: (42.8, 12.75) se lo metto tra " " mi dice picche, ok.
    quindi tra parentesi tonde, numerico con i decimali divisi dal punto e le coordinate separate dalla virgola.
    Se apro google maps e ci metto questo valore, mi trova un punto in centro Italia e ci mette il marker.
    Se scrivo queste coordinate sul mio programma:
    position: (42.8, 12.75)
    
    oppure
    position: "(42.8, 12.75)" // quindi stringa
    
    in entrambi i casi mi dice:
    Errore di run-time di Microsoft JScript: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: not an Object
    passi quello tra " ", ma quello senza deve andare.
    Anche se gli passo i numeri dentro una variabile non va.
    Un po' quello che dicevi prima: alla fine della storia, che tipo di variabile ci devo passare?
    Ma soprattutto perché non me lo mette nel title? Il fatto che non ci sia in title significa che non passa nelle proprietà di var marker = new google.maps.Marker({...
    Poi c'è l'incognita del fatto che la function DisegnaPunti del post precedente disegna i punti con il title uguale per tutti, quindi passa.
    Insomma è un gran macello, sto perdendo settimane dietro ad una scemata, e non ci capisco il verso.
    Comunque ancora grazie per la pazienza. Ciao, Ugo.

  9. #9
    UGoldrake non è in linea Scolaretto
    Aggiornamento.
    Ho anche avuto il suggerimento di passare la variabile Punti ad address, come sto già facendo, però siccome la passo come string, di trasformarla dopo in latLng, splittando ulteriormente Punti e passando a position quanto segue:
    FOR
    posto = Puntis[i] + ',' + Puntis[i + 1];
    //qui
    geocoder.geocode({ 'address': posto }, function (results, status) {
    postos = posto.split(",").map(String);
    alert(i)
    
    e poi
    
    position: new google.maps.LatLng(postos[0], postos[1])
    
    il problema è che tutto questo accade all'interno del FOR, ma il codice cicla il FOR SOLAMENTE fino a "//qui" poi finalmente mostra una sola volta alert(i).
    In questo modo disegna solo il primo marker, perché se metto degli alert successivi, mi ritornano undefined per tutti i punti tranne il primo.
    Ciao, Ugo.

  10. #10
    UGoldrake non è in linea Scolaretto
    Ciao Bottomap,
    a questo punto, dopo più di 15 giorni di prove, nonostante la tua pazienza, e per quella ti ringrazio, proverei a chiedere altrove.
    Mi pare di non andare contro la netiquette, visti i tempi e l'andamento della nostra discussione, giusto?
    Allora se sei d'accordo, domani provo su un altro forum che ho notato nel girovagare per la rete.
    Aspetto comunque un tuo messaggio o di qualche amministratore in tal senso.
    E comunque propongo di non chiudere il thread, in modo che possa completarlo con la risposta che spero venga presto.
    Ciao, Ugo.

+ Rispondi al messaggio
Pagina 1 di 2 12 ultimoultimo

Potrebbero interessarti anche ...

  1. [javascript]google maps infowindow
    Da Uccio87 nel forum HTML, CSS e JavaScript
    Risposte: 2
    Ultimo Post: 18-06-2014, 10:40
  2. Refresh marker su mappa google v3
    Da kekko87_ nel forum ASP 3, ASP .Net
    Risposte: 9
    Ultimo Post: 28-05-2013, 09:09
  3. Risposte: 3
    Ultimo Post: 17-01-2012, 16:47
  4. [Javascript]Spostamenti in Google maps
    Da simoneman nel forum HTML, CSS e JavaScript
    Risposte: 0
    Ultimo Post: 28-02-2010, 14:19
  5. [Javascript]Google Maps, si visualizza metà mappa
    Da w_t nel forum HTML, CSS e JavaScript
    Risposte: 2
    Ultimo Post: 25-01-2009, 19:00