2017-04-12 32 views
-1

私はGoogle Maps APIとそのプレイスライブラリを使用して、施設の住所と名前を取得できる自動補完フォームを用意しています。Googleマップから緯度と経度を取得するapi

現在、私は、コードでそれらを見つけたが、それはドキュメントの詳細なようではありませんよう、I:私は、私が検索した場所から緯度とLNGの値を取得できるようにしたい

これらの値を取得する方法、またはそれらが実際に正確であるかどうかはわかりません(私がやった20回の試行では正しい)。

Console log lat and lng

私は「緯度」の部分から緯度とLNGの両方を取得し、私は「LNG」の部分から正確に同じ情報を得ることができます見ることができるように。ここで

は私のコードです:

function initAutocomplete() { 
 
    var input = document.getElementById('autocomplete'); 
 
    var options = { 
 
    types: ['geocode', 'establishment'] 
 
    }; 
 
    autocomplete = new google.maps.places.Autocomplete(input, options); 
 

 
    autocomplete.addListener('place_changed', fillInAddress); 
 

 
}; 
 

 
function fillInAddress() { 
 
    // Get the place details from the autocomplete object. 
 
    var place = autocomplete.getPlace(); 
 
    console.log(place); 
 

 
    for (var component in componentForm) { 
 
    document.getElementById(component).value = ''; 
 
    document.getElementById(component).disabled = false; 
 
    } 
 
    document.getElementById("business").value = place.name; 
 
    document.getElementById("business").disabled = false; 
 
    // Get each component of the address from the place details 
 
    // and fill the corresponding field on the form. 
 
    for (var i = 0; i < place.address_components.length; i++) { 
 
    var addressType = place.address_components[i].types[0]; 
 
    if (componentForm[addressType]) { 
 
     var val = place.address_components[i][componentForm[addressType]]; 
 
     document.getElementById(addressType).value = val; 
 
    } 
 
    } 
 
} 
 

 
var placeSearch, autocomplete; 
 
var componentForm = { 
 
    street_number: 'short_name', 
 
    route: 'long_name', 
 
    locality: 'long_name', 
 
    administrative_area_level_1: 'short_name', 
 
    country: 'long_name', 
 
    postal_code: 'short_name', 
 
    lng: 'long_name', 
 
    lat: 'long_name' 
 
}; 
 

 
function geolocate() { 
 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 
     var geolocation = { 
 
     lat: position.coords.latitude, 
 
     lng: position.coords.longitude 
 
     }; 
 
     var circle = new google.maps.Circle({ 
 
     center: geolocation, 
 
     radius: position.coords.accuracy 
 
     }); 
 
     autocomplete.setBounds(circle.getBounds()); 
 
    }); 
 
    } 
 
}
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#map { 
 
    height: 100%; 
 
} 
 

 
#locationField, 
 
#controls { 
 
    position: relative; 
 
    width: 480px; 
 
} 
 

 
#autocomplete { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 99%; 
 
} 
 

 
.label { 
 
    text-align: right; 
 
    font-weight: bold; 
 
    width: 100px; 
 
    color: #303030; 
 
} 
 

 
#address { 
 
    border: 1px solid #000090; 
 
    background-color: #f0f0ff; 
 
    width: 480px; 
 
    padding-right: 2px; 
 
} 
 

 
#address td { 
 
    font-size: 10pt; 
 
} 
 

 
.field { 
 
    width: 99%; 
 
} 
 

 
.slimField { 
 
    width: 80px; 
 
} 
 

 
.wideField { 
 
    width: 200px; 
 
} 
 

 
#locationField { 
 
    height: 20px; 
 
    margin-bottom: 2px; 
 
} 
 

 

 
/* Always set the map height explicitly to define the size of the div 
 
    * element that contains the map. */ 
 

 
#map { 
 
    height: 100%; 
 
} 
 

 

 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#floating-panel { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 25%; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    text-align: center; 
 
    font-family: 'Roboto', 'sans-serif'; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
} 
 

 
#pano { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
#floating-panel { 
 
    width: 45%; 
 
    height: 100%; 
 
    float: right; 
 
    text-align: left; 
 
    overflow: auto; 
 
    position: static; 
 
    border: 0px solid #999; 
 
}
<body> 
 
    <div id="locationField"> 
 
    <input id="autocomplete" placeholder="Enter the brand name" onFocus="" type="text" /> 
 
    </div> 
 

 
    <table id="address"> 
 
    <tr> 
 
     <td class="label">Brand</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input class="field" id="business" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">Location</td> 
 
     <td class="slimField"> 
 
     <input class="field" id="street_number" disabled="true" /> 
 
     </td> 
 
     <td class="wideField" colspan="2"> 
 
     <input class="field" id="route" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">City</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input class="field" id="locality" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">State</td> 
 
     <td class="slimField"> 
 
     <input class="field" id="administrative_area_level_1" disabled="true" /> 
 
     </td> 
 
     <td class="label">number</td> 
 
     <td class="wideField"> 
 
     <input class="field" id="postal_code" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">Country</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input class="field" id="country" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">lng</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input class="field" id="lng" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">lat</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input class="field" id="lat" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 

 
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete" async defer></script>

+0

関連する質問:[google maps autocompleteの情報を取得](http://stackoverflow.com/questions/34677498/retrieve-info-from-google-maps-autocomplete) – geocodezip

+1

[Googleからの緯度と経度を取得] Place Autocomplete and Directionsスクリプト](http://stackoverflow.com/questions/42075280/fetch-latitude-longitude-from-google-place-autocomplete-and-directions-script) – geocodezip

答えて

2

あなただけの緯度と経度のデータを取得するために文書化された方法を使用する必要があります。

document.getElementById("lat").value = place.geometry.location.lat(); 
document.getElementById("lng").value = place.geometry.location.lng(); 

function initAutocomplete() { 
 
    var input = document.getElementById('autocomplete'); 
 
    var options = { 
 
    types: ['geocode', 'establishment'] 
 
    }; 
 
    autocomplete = new google.maps.places.Autocomplete(input, options); 
 
    autocomplete.addListener('place_changed', fillInAddress); 
 
}; 
 

 
function fillInAddress() { 
 
    // Get the place details from the autocomplete object. 
 
    var place = autocomplete.getPlace(); 
 
    console.log(place); 
 

 
    for (var component in componentForm) { 
 
    document.getElementById(component).value = ''; 
 
    document.getElementById(component).disabled = false; 
 
    } 
 
    document.getElementById("business").value = place.name; 
 
    document.getElementById("business").disabled = false; 
 
    // Get each component of the address from the place details 
 
    // and fill the corresponding field on the form. 
 
    for (var i = 0; i < place.address_components.length; i++) { 
 
    var addressType = place.address_components[i].types[0]; 
 
    if (componentForm[addressType]) { 
 
     var val = place.address_components[i][componentForm[addressType]]; 
 
     document.getElementById(addressType).value = val; 
 
    } 
 
    } 
 
    document.getElementById("lat").value = place.geometry.location.lat(); 
 
    document.getElementById("lng").value = place.geometry.location.lng(); 
 
} 
 

 
var placeSearch, autocomplete; 
 
var componentForm = { 
 
    street_number: 'short_name', 
 
    route: 'long_name', 
 
    locality: 'long_name', 
 
    administrative_area_level_1: 'short_name', 
 
    country: 'long_name', 
 
    postal_code: 'short_name', 
 
    lng: 'long_name', 
 
    lat: 'long_name' 
 
}; 
 

 
function geolocate() { 
 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 
     var geolocation = { 
 
     lat: position.coords.latitude, 
 
     lng: position.coords.longitude 
 
     }; 
 
     var circle = new google.maps.Circle({ 
 
     center: geolocation, 
 
     radius: position.coords.accuracy 
 
     }); 
 
     autocomplete.setBounds(circle.getBounds()); 
 
    }); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#map { 
 
    height: 100%; 
 
} 
 

 
#locationField, 
 
#controls { 
 
    position: relative; 
 
    width: 480px; 
 
} 
 

 
#autocomplete { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 99%; 
 
} 
 

 
.label { 
 
    text-align: right; 
 
    font-weight: bold; 
 
    width: 100px; 
 
    color: #303030; 
 
} 
 

 
#address { 
 
    border: 1px solid #000090; 
 
    background-color: #f0f0ff; 
 
    width: 480px; 
 
    padding-right: 2px; 
 
} 
 

 
#address td { 
 
    font-size: 10pt; 
 
} 
 

 
.field { 
 
    width: 99%; 
 
} 
 

 
.slimField { 
 
    width: 80px; 
 
} 
 

 
.wideField { 
 
    width: 200px; 
 
} 
 

 
#locationField { 
 
    height: 20px; 
 
    margin-bottom: 2px; 
 
} 
 

 

 
/* Always set the map height explicitly to define the size of the div 
 
    * element that contains the map. */ 
 

 
#map { 
 
    height: 100%; 
 
} 
 

 

 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#floating-panel { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 25%; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    text-align: center; 
 
    font-family: 'Roboto', 'sans-serif'; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
} 
 

 
#pano { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
#floating-panel { 
 
    width: 45%; 
 
    height: 100%; 
 
    float: right; 
 
    text-align: left; 
 
    overflow: auto; 
 
    position: static; 
 
    border: 0px solid #999; 
 
}
<body> 
 
    <div id="locationField"> 
 
    <input id="autocomplete" placeholder="Enter the brand name" onFocus="" type="text" /> 
 
    </div> 
 

 
    <table id="address"> 
 
    <tr> 
 
     <td class="label">Brand</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input class="field" id="business" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">Location</td> 
 
     <td class="slimField"> 
 
     <input class="field" id="street_number" disabled="true" /> 
 
     </td> 
 
     <td class="wideField" colspan="2"> 
 
     <input class="field" id="route" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">City</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input class="field" id="locality" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">State</td> 
 
     <td class="slimField"> 
 
     <input class="field" id="administrative_area_level_1" disabled="true" /> 
 
     </td> 
 
     <td class="label">number</td> 
 
     <td class="wideField"> 
 
     <input class="field" id="postal_code" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">Country</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input class="field" id="country" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">lng</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input class="field" id="lng" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">lat</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input class="field" id="lat" disabled="true" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 

 
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete" async defer></script>

+0

ありがとう、私はこれを試したときに私は忘れてしまったlatとlngの最後に '()'を追加します。今はすべて意味があります! :D – Relisora

関連する問題