-1
Google지도 API와 해당 장소 라이브러리를 사용하여 시설의 주소와 이름을 얻을 수있는 자동 완성 양식이 있습니다.Google지도에서 위도와 경도를 구하십시오. api
이 내가 검색 한 장소에서 위도와 LNG 값을 얻을 수 있도록하려면 :이 문서에 설명처럼하지로 현재 제가 코드에서 발견
하지만, I 이 값을 얻는 방법을 모르거나 매번 실제로 정확한 경우 (~ 20 회 시도가 정확합니다).
당신은 내가 "위도"부분에서 위도와 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>
관련 질문 : [google maps autocomplete에서 정보 검색] (0120-555-503) – geocodezip
[Google에서 위도 및 경도 가져 오기] 중복 가능 장소 자동 완성 및 길 찾기 스크립트] (http://stackoverflow.com/questions/42075280/fetch-latitude-longitude-from-google-place-autocomplete-and-directions-script) – geocodezip