드래그 가능한 Google지도 API V3을 사용하여 입력란의 마커 주소 가져 오기

FROM 및 TO 입력란에 자동 제안 기능이있는 Google지도 API V3 드래그 가능 마커를 사용하고 있습니다. 경로 표시를 클릭 한 후 2 개의 마커 A 및 B를 사용하여지도를 얻습니다. 마커 A 또는 B를 변경하면 Navigation (directionsPanel)에서 업데이트 된 위치가 표시됩니다. 새로운 마커 주소에서이 위치가 필요합니다 : 그리고 새로운 마커 주소로 : 마커 A와 B가 드래그되었을 때 필드를 입력하십시오 .A는 FROM이고 B는 TO 위치입니다. Google에서 검색 한 후 API 세부 정보를 읽었지만 해결책을 찾지 못했습니다. 나중에 참조 할 수 있도록 데이터베이스에 이러한 업데이트 된 마커 위치 (주소)를 삽입해야합니다. 미리 감사드립니다.드래그 가능한 Google지도 API V3을 사용하여 입력란의 마커 주소 가져 오기

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Google Map Finalized</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
     #directionsPanel{ 
     overflow-y:auto; 
     width:40%; 
     height:200px; 
     } 

    input[type="text"] { 
    width: 350px; 
    height:30px; 
} 

    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>‌ 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 

var rendererOptions = { 
    draggable: true 
}; 
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);; 
var directionsService = new google.maps.DirectionsService(); 
var map; 

var start_pos = new google.maps.LatLng(33.7167,73.0667); 

function initialize() { 

var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(69.386,29.967), 
new google.maps.LatLng(69.3451155,30.3753205) 
); 

    var mapOptions = { 
    bounds:defaultBounds, 
    zoom:17, 
    center: start_pos 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    var from = (document.getElementById('from')); 
    var to = (document.getElementById('to')); 
    var autocomplete = new google.maps.places.Autocomplete(from); 
    var autocomplete = new google.maps.places.Autocomplete(to); 
    autocomplete.bindTo('defaultBounds', map); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('directionsPanel')); 
    google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
    computeTotalDistance(directionsDisplay.getDirections()); 
    }); 
    calcRoute(); 
    codeAddress(); 
} 


function calcRoute() { 
    var request = { 
    origin: document.getElementById('from').value, 
    destination: document.getElementById('to').value, 
    travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
    } 
    }); 
} 

function computeTotalDistance(result) { 
    var total = 0; 
    var myroute = result.routes[0]; 
    for (var i = 0; i < myroute.legs.length; i++) { 
    total += myroute.legs[i].distance.value; 
    } 
    total = total/1000.0; 
    document.getElementById('total').innerHTML = total + ' km'; 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

    <script> 
$(document).ready(function(){ 
$('button').on('click',initialize); 
}); 
</script> 

    </head> 
    <body> 
    <div id="map-canvas" style="float:left;width:60%; height:100%"></div> 

    <div id="from_to"> 
    FROM: <input id="from" class="controls" type="text" placeholder="Enter a location"> 
    <br/><br/><hr/> 
    TO:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="to" class="controls" type="text" placeholder="Enter a location"> 
    <br/><hr/> 
    <button id="btn_refresh">Show route</button> 
    <p>Total Distance: <span id="total"></span></p> 
    </div> 
    NAVIGATION: 
    <div id="directionsPanel"> 
    </div> 

    FROM NEW MARKER ADDRESS: <input type="text" id="addressmarker1" size="30"> 
    <br/><br/><hr/> 
    TO NEW MARKER ADDRESS: <input type="text" id="addressmarker2" size="30"> 

    </body> 
</html>

출처

2014-10-13 Furqan Aziz

당신이'directions_changed' 이벤트 리스너 내에서'codeAddress' 함수를 호출하지 마십시오 도움이 경우

하십시오는 해결 표시? Btw. 이 기능은 어디에 있습니까? – MrUpsidown

+0

입력란에 내비게이션 A와 B 업데이트 주소가 필요합니다. 함수에 대해 잘 모르겠습니다. –

+0

Maps API를 두 번로드하는 것은 좋지 않습니다. '' – duncan

//DISTANCE document.getElementById("distance").value = directionsList.routes[0].legs[0]["distance"]["text"]; //DURATION \t document.getElementById("duration").value = directionsList.routes[0].legs[0]["duration"]["text"]; \t //LATLNG POINT A \t document.getElementById("fromLatLng").value = directionsList.routes[0].legs[0]["start_location"]["k"] + "," + directionsList.routes[0].legs[0]["start_location"]["B"] ; //LATLNG POINT B \t document.getElementById("toLatLng").value = directionsList.routes[0].legs[0]["end_location"]["k"] + "," + directionsList.routes[0].legs[0]["end_location"]["B"]; \t

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { var directionsList = directionsDisplay.getDirections(); computeTotalDistance(directionsList); document.getElementById("from").value = directionsList.routes[0].legs[0]["start_address"]; document.getElementById("to").value = directionsList.routes[0].legs[0]["end_address"]; });

드래그 가능한 Google지도 API V3을 사용하여 입력란의 마커 주소 가져 오기

답변

관련 문제