web-dev-qa-db-ja.com

逆ジオコーディングコード

私はGoogleマップで逆ジオコーディング用のJavavscriptコードをまとめることに取り組んできました。抱えていた問題はすべて解決したと思いましたが、まだ問題があります。

JavascriptコードをHTMLファイルに埋め込むと、問題なく動作します。ただし、JavaScriptを（いくつかの変更を加えて）別のファイルとして実行しようとすると、フォームを開くとマップが読み込まれますが、緯度と経度の座標を入力し、関連するボタンを押してジオコードを逆にすると、すべてが発生しますマップが更新されるということです。

JSコードが埋め込まれたHTMLファイルを添付してから、別のJSコードファイルを添付して比較しました。

Javascriptが埋め込まれたHTMLファイル

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Reverse Geocoding</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var infowindow = new google.maps.InfoWindow();
  var marker;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(40.730885,-73.997383);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: 'roadmap'
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeLatLng() {

    var lat = document.getElementById('Latitude').value;
    var lng = document.getElementById('Longitude').value;

    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          map.setZoom(11);
          marker = new google.maps.Marker({
              position: latlng, 
              map: map
          }); 
        var address= (results[1].formatted_address);
        document.getElementById('Address').value= results[1].formatted_address;
        infowindow.setContent(results[1].formatted_address);


          infowindow.open(map, marker);
        } else {
          alert("No results found");
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
  }
</script>
</head>
<body onLoad="initialize()">
<div>
  <input name="Latitude" type="text" id="Latitude" size="16" maxlength="10" />
  <input name="Longitude" type="text" id="Longitude" size="16" maxlength="10" />
  <input name="Address" type="text" id="Address" size="55" />
</div>
<div>
  <input type="button" value="Reverse Geocode" onClick="codeLatLng()">
</div>
<div id="map_canvas" style="height: 90%; top:60px; border: 1px solid black;"></div>
</body>
</html>

Javascriptコード

(function ReverseGeocode() {

    //This is declaring the Global variables

    var geocoder, map, marker;

    //This is declaring the 'Geocoder' variable
    geocoder = new google.maps.Geocoder();

    window.onload = function() {

    //This is creating the map with the desired options 
        var myOptions = {
            zoom: 6,
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.ZOOM_PAN,
                position: google.maps.ControlPosition.TOP_LEFT
            },
            scaleControl: true,
            scaleControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_LEFT
            }
            };

        map = new google.maps.Map(document.getElementById('map'), myOptions);
        var form = document.getElementById('SearchForLocationForm');

        //This is getting the 'Latitude' and 'Longtiude' co-ordinates from the associated text boxes on the HTML form
        var lat = document.getElementById('Latitude').value;
        var lng = document.getElementById('Longitude').value;

        //This is putting the 'Latitude' and 'Longitude' variables together to make the 'latlng' variable
        var latlng = new google.maps.LatLng(lat, lng);

        // This is making the Geocode request
        geocoder.geocode({'latLng': latlng}, function(results, status) {

        // This is checking to see if the Geoeode Status is OK before proceeding    
            if (status == google.maps.GeocoderStatus.OK) {

        //This is placing the marker at the returned address    
            if (results[1]) {
          // Creating a new marker and adding it to the map
            map.setZoom(16); 
          marker = new google.maps.Marker({
            map: map, draggable:true
          });
        }

        var address= (results[1].formatted_address);

        //This is placing the returned address in the 'Address' field on the HTML form  
        document.getElementById('Address').value= results[1].formatted_address;
                }
            }
);
    };
})();
javascriptgoogle-maps-api-3reverse-geocoding
15
IRHM

これはKhepriの（ありがとう！）コードの短いバージョンです

function getReverseGeocodingData(lat, lng) {
    var latlng = new google.maps.LatLng(lat, lng);
    // This is making the Geocode request
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status !== google.maps.GeocoderStatus.OK) {
            alert(status);
        }
        // This is checking to see if the Geoeode Status is OK before proceeding
        if (status == google.maps.GeocoderStatus.OK) {
            console.log(results);
            var address = (results[0].formatted_address);
        }
    });
}

これも必要です。頭の中で忘れないでください。

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
21
Sebastian Viereck

私はあなたがそれを私のために機能する何かにそれを修正したものを取りました...

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps JavaScript API v3 Example: Reverse Geocoding</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="/Scripts/test.js" type="text/javascript"></script>    
</head>
<body onload="ReverseGeocode.Init()">
    <div>
        <input name="Latitude" type="text" id="Latitude" size="16" maxlength="10" />
        <input name="Longitude" type="text" id="Longitude" size="16" maxlength="10" />
        <input name="Address" type="text" id="Address" size="55" />
    </div>
    <div>
        <input type="button" value="Reverse Geocode" onclick="ReverseGeocode.ReverseCode()">
    </div>
    <div id="map_canvas" style="height: 90%; top: 60px; border: 1px solid black;">
    </div>
</body>
</html>

これは以下の私のtest.jsコードになります

var ReverseGeocode = function () {

    //This is declaring the Global variables

    var geocoder, map, marker;

    //This is declaring the 'Geocoder' variable
    geocoder = new google.maps.Geocoder();

    function GeoCode(latlng) {

        // This is making the Geocode request
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {

            if(status !== google.maps.GeocoderStatus.OK)
            {
                alert(status);
            }
            // This is checking to see if the Geoeode Status is OK before proceeding    
            if (status == google.maps.GeocoderStatus.OK) {

                //This is placing the marker at the returned address    
                if (results[0]) {
                    // Creating a new marker and adding it to the map
                    map.setZoom(16);
                    marker = new google.maps.Marker({
                        map: map, draggable: true
                    });
                    marker.setPosition(latlng);
                    map.panTo(latlng);
                }

                var address = (results[0].formatted_address);

                //This is placing the returned address in the 'Address' field on the HTML form  
                document.getElementById('Address').value = results[0].formatted_address;
            }
        });

    }

    return {

        Init: function () {

            //This is putting the 'Latitude' and 'Longitude' variables 
                            //together to make the 'latlng' variable
            //var latlng = new google.maps.LatLng(lat, lng);
            var latlng = new google.maps.LatLng(40.730885, -73.997383);

            //This is creating the map with the desired options 
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: 'roadmap'
            }

            map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

            GeoCode(latlng);
        },

        ReverseCode: function () {

            //This is getting the 'Latitude' and 'Longtiude' co-ordinates from the associated text boxes on the HTML form
            var lat = document.getElementById('Latitude').value;
            var lng = document.getElementById('Longitude').value;

            var latlng = new google.maps.LatLng(lat, lng);

            GeoCode(latlng);

        }
    };

} ();             // the parens here cause the anonymous function to execute and return

基本的に、使用していたwindow.onloadハンドラーを置き換え、「オブジェクト」を、最初にマップを設定するinitイベントに設定しました。次に、ユーザーがlat/lngと入力し、ジオコードラッパーを呼び出す関数を公開しました。

少しの変更で動作するはずです（私がスキップした大量のエラー処理を除いて:-p）。

2
Khepri