住所フォームへの入力の手間を軽減できないかと考えてみた。
動作はしますが、表示される住所精度は、PCやスマホ等の利用環境に影響を受ける為、 自動入力後、手修正が必要。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>input address test</title> </head> <body> <h1>end0tknr's input address test</h1> ブラウザの Geolocation API で緯度・経度を取得し、<br/> 更に google map api で、緯度・経度→住所 変換します。<br/> 表示される住所精度は、PCやスマホ等の利用環境に影響を受ける為、<br/> 自動入力後、手修正を行って下さい。<br/> <form method="post"> <table> <thead> <tr><td colspan="2"> <button type="button" onClick="myform.input_address();">GET ADDRESS</button> </td></tr> </thead> <tbody> <tr> <td>緯度・経度</td> <td><input id="lat" type="text" style="width:95px;"> <input id="lng" type="text" style="width:95px;"> </td> </tr> <tr> <td>郵便番号</td> <td><input id="zipcode" type="text" style="width:200px;"></td> </tr> <tr> <td>都道府県</td> <td><input id="pref" type="text" style="width:200px;"></td> </tr> <tr> <td>市区町村</td> <td><input id="city" type="text" style="width:200px;"></td> </tr> <tr> <td>その他 </td> <td><input id="address_other" type="text" style="width:200px;"></td> </tr> </tbody> </table> </form> <script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="form.js"></script> </body> </html>
(function() { var MyForm = function() {}; MyForm.prototype = { gmap_api_url :'https://maps.googleapis.com/maps/api/geocode/json', gmap_api_opt :{"key" :"AIza ないしょ sMu4", "language":"ja", "sensor" :false}, input_address: function(){ if( ! navigator.geolocation ) { // Geolocation API 対応check alert( "ご利用のブラウザは、現在位置(緯度/軽度)を取得できません。"); return false; } var this_obj = this; navigator.geolocation.getCurrentPosition( function(position){this_obj.post_current_pos_success(position)}, function(error ){this_obj.post_current_pos_error(error)}, {"enableHighAccuracy": false, "timeout" : 8000, "maximumAge": 2000}); }, post_current_pos_success: function(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var acc_latlng = position.coords.accuracy; $("#lat").val(lat); $("#lng").val(lng); var req_data = this.gmap_api_opt; console.log(req_data); req_data["latlng"] = lat+","+lng; $.ajax({url: this.gmap_api_url, type: 'GET', data: req_data }) .done( (data) => { this.post_conv_latlng_to_address(data) }) .fail( (data) => { alert("error",data) }); }, post_current_pos_error: function(error){ var err_msgs = {0: "原因不明のエラーです" , 1: "位置情報の取得が未許可です" , 2: "通信状況等により位置情報取得に失敗" , 3: "位置情報取得がtimeout"}; alert( err_msgs[error.code] ); }, post_conv_latlng_to_address: function(data){ if (data.status != "OK"){ alert("緯度・経度→住所返還に失敗しました"); return false; } for (var i=0; i<data.results.length; i++) { var addr_compo = data.results[i].address_components.reverse(); if(!addr_compo[0].long_name.match( /^\d{3}-?\d{4}$/g ) || addr_compo[1].long_name != "日本" ){ continue; } console.log(data.results[i]); $("#zipcode").val(addr_compo[0].long_name); $("#pref").val(addr_compo[2].long_name); $("#city").val(addr_compo[3].long_name); var formatted_address = data.results[i].formatted_address; var addr_header = "日本、〒" + addr_compo[0].long_name + " " + addr_compo[2].long_name + addr_compo[3].long_name; var address_other = formatted_address.replace(addr_header, ''); $("#address_other").val( address_other ); break; } } } window.myform = new MyForm(); })();
