사용자 정의 Google지도에서 우편 번호로 검색 추가

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

  •  11-09-2019
  •  | 
  •  

문제

먼저이 사이트를 처음 접했고 Google Maps API와 함께 일한 적이 없으며 JavaScript에 대한 중간 지식을 가지고 있다고 말하고 싶습니다.

내가 뭘 한거지:Google 'My Maps'에 위치를 추가하여 맞춤형 '상점 로케이터'를 구성했습니다. 그런 다음 드롭 다운 메뉴가있는 웹 페이지를 만들었고 드롭 다운에서 선택한 위치에 따라 맵을 보유한 iframe의 SRC를 변경합니다. 따라서 페이지가로드되면 대규모 맵이 표시되고 특정 위치를 선택하면 맵이 해당 특정 위치 (줌 및 작물)로 변경됩니다.

내가해야 할 일:이 맵을 완성하기 위해 지금해야 할 일은 사용자가 우편 번호를 넣고 웹 페이지에 가장 가까운 위치 목록과 거리를 반환 할 수 있도록하는 '우편 번호 검색'을 추가하는 것입니다.

사용자 정의 Google지도에 'Zip으로 검색'기능을 추가 할 수 있는지에 대한 아이디어가 있습니까?

내 코드에는 게시 할 것이 많지 않지만 도움이되면 기꺼이 그렇게 할 것입니다. 내지도의 현재 기능은 훌륭하게 작동합니다. 문제는 우편 번호 검색 추가를 시작해야 할 곳을 모른다는 것입니다.

다음은 내가 언급하는 페이지에 대한 링크입니다. 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지도와 상호 작용하는 방법은 모르겠습니다. 가장 좋은 옵션은 Google 매핑 API. Google은 약간 훌륭합니다 선적 서류 비치 그리고 예 당신을 시작하기 위해.

이봐, 나도 비슷한 검색을하고있다. 여기에서 쿼리 및 공식에 대한 링크뿐만 아니라 관련된 수학에 대한 아주 좋은 토론을 찾았습니다. http://uclue.com/?xq=2861. 도움이 되었기를 바랍니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top