L'aggiunta di una ricerca per codice postale in una mappa di Google personalizzato

StackOverflow https://stackoverflow.com/questions/1101063

  •  11-09-2019
  •  | 
  •  

Domanda

Per prima cosa vorrei dire che io sono nuovo di questo sito, mai lavorato con Google Maps API e hanno una conoscenza intermedia della JavaScript.

Che cosa ho fatto: Ho messo insieme un custom 'store locator' con l'aggiunta di posizioni ad un Google 'il mio mappe'. Poi ho creato una pagina web con un menu a discesa e in base alla posizione selezionata dal menu a tendina, cambia il CRS per l'iFrame tenendo la carta. Così, quando la pagina viene caricata si vede una mappa in scala più grande e selezionando posizioni specifiche, cambierà la mappa per quella posizione specifica (zoom e delle colture).

Che cosa devo fare: Che cosa devo fare ora per completare questa mappa è quello di aggiungere un 'Ricerca per codice postale' che permetterà all'utente di inserire nel loro codice di avviamento postale e hanno la pagina web restituisce una lista dei luoghi più vicini e, auspicabilmente, le loro distanze.

Qualcuno ha un'idea se sarò in grado di aggiungere la funzionalità di 'ricerca per zip' a mia abitudine mappa di Google?

In realtà non c'è molto da mio codice per pubblicare, ma se servirà, sarò contento di farlo. L'attuale funzionalità della mia mappa funziona alla grande, il problema è che non so da dove cominciare aggiungendo la ricerca del codice di avviamento postale.

Questo è il link alla pagina che mi riferisco a: http://74.53.82.155/ store-locator.htm

Ogni aiuto è apprezzato.

Grazie in anticipo, gnrlchaos

È stato utile?

Soluzione

Una possibilità è quella di utilizzare il servizio web che geonames torna posizioni da codici di avviamento postale . Ecco un rapido esempio di come utilizzare tale servizio web con dojo. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="layout.css">
        <script type="text/javascript">var djConfig = { parseOnLoad: true }</script>
        <script type="text/javascript" src="../dojo-release-1.3.0/dojo/dojo.js"></script>
        </script>
        <script type="text/javascript">
            dojo.require("dojo.io.script");
                function getPlace() {
        var zip = dojo.byId('zipcode').value;
        console.log('zip is ', zip);
        //use country code to get results for a specific country
        //var gn_url = 'http://ws.geonames.org/postalCodeLookupJSON?postalcode=' + zip + '&country=US';
        var gn_url = 'http://ws.geonames.org/postalCodeLookupJSON?postalcode=' + zip;
        console.log(gn_url);
        dojo.io.script.get({
          url: gn_url, 
          callbackParamName: "callback",
          load:function(response, io) { 
            console.log('got json.'); 
            console.dir(response); 
            places = response.postalcodes; 
            var infos = []
            dojo.forEach(places, function(p, i) {
                infos[i] = p.placeName + ', ' + p.adminName1 + ', Lat: ' + p.lat + '; Long: ' + p.lng + '<br />';
            });
                dojo.byId('postalCode').innerHTML = infos.join('');
          }, 
          error:errorCb
        });   
        }

        function errorCb(type, data, evt){
                debug(data);
        }
         </script>
     </head>
     <body class="tundra">
    Enter a zip code: <input id="zipcode" type="text" /> <button onclick="getPlace(); return false;" value="Find Place.">Find Place.</button>
      <div>Places:</div><div id="postalCode"></div>
    </body>
</html>

Altri suggerimenti

Non conosco alcun modo di interagire con un programma integrato di Google Map nel modo desiderato. L'opzione migliore sarebbe quella di creare la tua mappa con la API di Google Maps . Google ha qualche grande documentazione e esempi per iniziare.

Ehi, sto lavorando su una ricerca simile anche. ho trovato una buona discussione della matematica coinvolta, così come i collegamenti a quesiti e formule, qui: http: / /uclue.com/?xq=2861 . Spero che questo aiuti.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top