Добавление поиска по почтовому индексу в пользовательскую карту Google - PullRequest
Новая
       27

Добавление поиска по почтовому индексу в пользовательскую карту Google

4 голосов
/ 09 июля 2009

Во-первых, я хотел бы сказать, что я новичок в этом сайте, никогда не работал с Google Maps API и обладаю средними знаниями JavaScript.

Что я сделал: Я собрал собственный «локатор магазина», добавив местоположения в Google «мои карты». Затем я создал веб-страницу с раскрывающимся меню и в зависимости от местоположения, выбранного из раскрывающегося списка, изменяет SRC для iFrame, содержащего карту. Поэтому, когда страница загружается, вы видите карту большего масштаба и, выбирая определенные местоположения, она изменит карту на это конкретное местоположение (увеличение и обрезка).

Что мне нужно сделать: Что мне нужно сделать сейчас, чтобы заполнить эту карту, так это добавить «поиск по почтовому индексу», который позволит пользователю ввести свой почтовый индекс и получить на веб-странице список ближайших мест и, надеюсь, их расстояния.

У кого-нибудь есть идея, смогу ли я добавить функцию «поиск по почтовому индексу» на свою карту Google?

На самом деле мой код не так много для публикации, но если это поможет, я с удовольствием это сделаю. Текущая функциональность моей карты работает отлично, проблема в том, что я не знаю, с чего начать добавление поиска по почтовому индексу.

Вот ссылка на страницу, на которую я ссылаюсь: http://74.53.82.155/store-locator.htm

Любая помощь приветствуется.

Спасибо заранее, gnrlchaos

Ответы [ 3 ]

3 голосов
/ 21 августа 2009

Одним из вариантов является использование веб-службы geonames, которая возвращает местоположения из почтовых индексов . Вот краткий пример того, как использовать этот веб-сервис с 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>
1 голос
/ 13 июля 2009

Я не знаю, как вы можете взаимодействовать со встроенной картой Google. Наилучшим вариантом будет создание собственной карты с помощью Google Maps API . У Google есть несколько отличных документов и примеров , чтобы начать работу.

0 голосов
/ 21 августа 2009

эй, я тоже работаю над подобным поиском. я нашел довольно хорошее обсуждение математики, а также ссылки на запросы и формулы, здесь: http://uclue.com/?xq=2861. надеюсь, что это поможет.

...