![](/img/trans.png)
[英]Not able to set multiple markers on the Google maps using Google map javascript api v3
[英]Get Markers Addresses in Input fields using Drag-able Google Maps API V3
我正在使用Google Maps API V3可拖动标记,并且在FROM和TO字段中具有自动建议功能。 单击“显示路线”后,将获得带有2个标记A和B的地图。如果更改标记A或B,它将在导航(directionsPanel)中显示更新的位置。 我需要在FROM新标记地址中的这些位置:以及TO NEW MARKER地址:拖动标记A和B时输入字段.A是FROM的,B是TO Location的。 我在Google上搜索并阅读了API详细信息,但未找到解决方案。 我需要在数据库中插入这些更新的标记位置(地址),以备将来参考。 提前致谢。
<!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: <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>
尝试这个:
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"]; });
您还可以访问其他值:
//DISTANCE document.getElementById("distance").value = directionsList.routes[0].legs[0]["distance"]["text"]; //DURATION document.getElementById("duration").value = directionsList.routes[0].legs[0]["duration"]["text"]; //LATLNG POINT A document.getElementById("fromLatLng").value = directionsList.routes[0].legs[0]["start_location"]["k"] + "," + directionsList.routes[0].legs[0]["start_location"]["B"] ; //LATLNG POINT B document.getElementById("toLatLng").value = directionsList.routes[0].legs[0]["end_location"]["k"] + "," + directionsList.routes[0].legs[0]["end_location"]["B"];
请标记为已解决,如果有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.