Adición de una búsqueda por código postal en un mapa de Google personalizada

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

  •  11-09-2019
  •  | 
  •  

Pregunta

En primer lugar me gustaría decir que soy nuevo en este sitio, nunca trabajó con el API de Google Maps y tienen un conocimiento intermedio de JavaScript.

Lo que he hecho: Monté una costumbre 'localizador de tiendas' añadiendo ubicaciones a un Google 'mis mapas'. Entonces creé una página web con un menú desplegable y en función de la ubicación que seleccione en el menú desplegable, cambia el SRC para el marco flotante que sostiene el mapa. Así que cuando se carga la página que ven un mapa más grande escala y mediante la selección de lugares específicos, que va a cambiar el mapa para esa ubicación específica (zoom y recorte).

¿Qué tengo que hacer: Lo que tengo que hacer ahora para completar este mapa es añadir una 'búsqueda por código postal' que permitirá al usuario a poner en su código postal y tener la página Web devuelve una lista de los lugares más cercanos y es de esperar sus distancias.

¿Alguien tiene una idea de si voy a ser capaz de añadir la funcionalidad de 'búsqueda por zip' a mi costumbre mapa de Google?

En realidad no hay mucho que mi código para publicar, pero si va a ayudar, con mucho gusto voy hacerlo. La funcionalidad actual de mi mapa funciona muy bien, el problema es que no sé por dónde empezar la adición de la búsqueda de código postal.

Aquí hay un enlace a la página que me refiero a: http://74.53.82.155/ tienda-locator.htm

Cualquier ayuda es apreciada.

Gracias de antemano, gnrlchaos

¿Fue útil?

Solución

Una opción es utilizar el servicio web que geonames vuelve poblaciones de códigos postales . Aquí está un ejemplo rápido de cómo utilizar ese servicio web con el 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>

Otros consejos

No sé de ninguna manera de interactuar con un mapa de Google insertado en la forma en que desea. La mejor opción sería la de crear su propio mapa con la API de Google Maps . Google tiene un gran documentación y ejemplos para empezar.

Hola, estoy trabajando en una búsqueda similar también. He encontrado una muy buena discusión de las matemáticas involucradas, así como enlaces a las consultas y fórmulas, aquí: http: / /uclue.com/?xq=2861 . espero que esta ayuda.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top