안녕하세요, 현재이 코드를 사용하고 있습니다.
<div id="inputList">
<script type="text/javascript">
function initialize() {
var input = document.getElementById('inputList').getElementsByClassName("searchTextField")[0];
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
document.getElementById('city1').value = place.name;
document.getElementById('cityLat1').value = place.geometry.location.lat();
document.getElementById('cityLng1').value = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<input class="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
<input class="city" id="city1" name="city1" />
<input class="cityLat" id="cityLat1" name="cityLat" />
<input class="cityLng" id="cityLng1" name="cityLng" />
<!-- What to put here?
<script type="text/javascript">
('#addLocation').click(function() {
('#inputList').append('??');
});
</script>
-->
<br>
<input type="button" value="Add New Location" id="addLocation" />
</div>
Google 자동 완성을 활용하여 위치의 위도 / 경도로 필드를 채 웁니다. 이 부분은 잘 작동하지만 위치 추가 버튼을 누른 후 동일한 입력 필드를 추가 할 수 있기를 원합니다. 추가하는 방법 (추가하기 위해 전달할 매개 변수)을 파악할 수 없습니다. 기본적인 지식이 있지만 HTML 및 Javascript에 너무 익숙하지 않은 경우 도움을 주시면 감사하겠습니다.
inputItems를 div에 넣은 다음 jquery clone()함수를 사용하여 복제 할 수 있습니다 . 다음은 HTML입니다.
<form id="dataForm">
<input class="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
<div id="listFields1">
<input class="city" id="city1" name="city1" />
<input class="cityLat" id="cityLat1" name="cityLat" />
<input class="cityLng" id="cityLng1" name="cityLng" />
</div>
</form>
<input type="button" value="Add New Location" id="addLocation" />
보시다시피, 모든 것을 폼 안에 넣은 다음 listFields1이라고 부르는 div에 입력을 넣습니다. 이는 복제 한 다음 폼에 추가하지만 복제 된 목록 ID를 변경 (증가)하기 전에합니다.
$('#addLocation').click(function() {
// get the last cloned list"
var list = $('div[id^="listFields"]:last');
// add 1 to the last number we have on the last listField id
var num = parseInt( list.prop("id").match(/\d+/g), 10 ) +1;
// clone the new list to the form
var newList = list.clone().prop('id', 'listFields'+num ).appendTo( "#dataForm" );;
})
또한 city, cityLat 및 cityLng의 경우 글로벌 목록에서와 동일하게 모든 ID를 변경해야합니다.
여기에 작동하는 JSfiddle
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다