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

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

  •  11-09-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

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

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

Заранее спасибо, gnrlchaos

Это было полезно?

Решение

Одним из вариантов является использование веб-сервиса 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>

Другие советы

Я не знаю ни одного способа взаимодействовать со встроенной картой Google так, как вы хотите.Лучшим вариантом было бы создать свою собственную карту с помощью API Карт Google.У Google есть несколько отличных Документация и примеры чтобы вы начали.

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top