Ajout d'une recherche par code postal dans une carte Google personnalisée

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

  •  11-09-2019
  •  | 
  •  

Question

D'abord, je voudrais dire que je suis nouveau sur ce site, jamais travaillé avec l'API Google Maps et ont une connaissance intermédiaire de JavaScript.

Qu'est-ce que je l'ai fait: Je mets ensemble « localisateur de magasin » une coutume en ajoutant des emplacements à un Google 'mes cartes. J'ai ensuite créé une page Web avec un menu déroulant et en fonction de l'emplacement que vous sélectionnez dans le menu déroulant, il change la SRC pour l'iFrame tenant la carte. Ainsi, lorsque la page se charge que vous voyez une carte plus grande échelle et en sélectionnant des emplacements spécifiques, il va changer la carte à cet endroit précis (zoom et culture).

Qu'est-ce que je dois faire: Ce que je dois faire pour compléter cette carte est d'ajouter une « recherche par code postal » qui permettra à l'utilisateur de mettre dans leur code postal et que la page web retourner une liste des lieux et, espérons-les distances les plus proches.

Est-ce que quelqu'un a une idée si je serai en mesure d'ajouter la fonctionnalité « recherche par zip » à mon habitude carte Google?

Il n'y a vraiment pas grand chose à mon code pour poster, mais si elle vous aidera, je serai heureux de le faire. La fonctionnalité actuelle de ma carte fonctionne très bien, le problème est que je ne sais pas où commencer à ajouter la recherche de code.

Voici un lien vers la page que je me réfère à: http://74.53.82.155/ magasin locator.htm

Toute aide est appréciée.

Merci d'avance, gnrlchaos

Était-ce utile?

La solution

Une option consiste à utiliser le service Web geonames que retourne lieux de codes postaux . Voici un exemple rapide de la façon d'utiliser ce service Web avec 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>

Autres conseils

Je ne connais aucune façon d'interagir avec une carte Google Map intégrée de la manière que vous voulez. La meilleure option serait de créer votre propre carte avec le API Google Maps . Google a un grand et Exemples pour vous aider à démarrer.

hey, je travaille sur une recherche similaire aussi. je l'ai trouvé une très bonne discussion sur les mathématiques impliqués, ainsi que des liens vers des requêtes et des formules, ici: http: / /uclue.com/?xq=2861 . espérons que cette aide.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top