Javascript 使用可拖动的Google Maps API V3获取输入字段中的标记地址_Javascript_Google Maps_Google Maps Api 3

Javascript 使用可拖动的Google Maps API V3获取输入字段中的标记地址

javascript google-maps google-maps-api-3

Javascript 使用可拖动的Google Maps API V3获取输入字段中的标记地址,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正在使用谷歌地图API V3拖动标记和自动建议从和到字段。单击“显示路线”后，我将获得带有2个标记A和B的地图。如果我更改标记A或B，它将在导航（方向面板）中显示更新的位置。我需要这些位置在FROM NEW MAKER ADDRESS:和TO NEW MAKER ADDRESS:拖动标记A和B时输入字段中。A表示FROM，B表示TO位置。我在谷歌上搜索并阅读了API的详细信息，但没有找到解决方案。我需要在数据库中插入这些更新的标记位置（地址），以供将来参考。提前谢谢 <!DOCTYPE

我正在使用谷歌地图API V3拖动标记和自动建议从和到字段。单击“显示路线”后，我将获得带有2个标记A和B的地图。如果我更改标记A或B，它将在导航（方向面板）中显示更新的位置。我需要这些位置在FROM NEW MAKER ADDRESS:和TO NEW MAKER ADDRESS:拖动标记A和B时输入字段中。A表示FROM，B表示TO位置。我在谷歌上搜索并阅读了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:&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>


谷歌地图定稿
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
#方向盘{
溢出y：自动；
宽度：40%；
高度：200px；
}
输入[type=“text”]{
宽度：350px；
高度：30px；
}
‌
var renderoptions={
德拉格布尔：是的
};
var directionsDisplay=new google.maps.directionsrender（rendererOptions）；；
var directionsService=new google.maps.directionsService（）；
var映射；
var start_pos=new google.maps.LatLng（33.7167,73.0667）；
函数初始化（）{
var defaultBounds=new google.maps.LatLngBounds(
新google.maps.LatLng（69.386,29.967），
新google.maps.LatLng（69.3451155,30.3753205）
);
变量映射选项={
界限：默认界限，
缩放：17，
中心：开始位置
};
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（来自）；
var autocomplete=new google.maps.places.autocomplete（to）；
autocomplete.bindTo（'defaultBounds'，map）；
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（'directionsPanel'）；
google.maps.event.addListener（directionsDisplay，'directions_changed'，function（）{
ComputeTotalInstance（directionsDisplay.getDirections（））；
});
calcRoute（）；
代码地址（）；
}
函数calcRoute（）{
var请求={
来源：document.getElementById（'from'）。值，
目标：document.getElementById（'to'）。值，
travelMode:google.maps.travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
函数ComputeTotalInstance（结果）{
var合计=0；
var myroute=result.routes[0]；
对于（var i=0；i

致：


显示路线
总距离：
导航：
从新标记地址：



要创建新标记地址，请执行以下操作：

试试这个：

google.maps.event.addListener（directionsDisplay，'directions_changed'，function（）{
var directionsList=directionsDisplay.getDirections（）；
ComputeTotalInstance（方向列表）；
document.getElementById（“from”）.value=directionsList.routes[0]。legs[0][“起始地址”]；
document.getElementById（“to”）.value=directionsList.routes[0]。legs[0][“end_address”]；
});试试这个：

google.maps.event.addListener（directionsDisplay，'directions_changed'，function（）{
var directionsList=directionsDisplay.getDirections（）；
ComputeTotalInstance（方向列表）；
document.getElementById（“from”）.value=directionsList.routes[0]。legs[0][“起始地址”]；
document.getElementById（“to”）.value=directionsList.routes[0]。legs[0][“end_address”]；
});试试这个：

google.maps.event.addListener（directionsDisplay，'directions_changed'，function（）{
var directionsList=directionsDisplay.getDirections（）；
ComputeTotalInstance（方向列表）；
document.getElementById（“from”）.value=directionsList.routes[0]。legs[0][“起始地址”]；
document.getElementById（“to”）.value=directionsList.routes[0]。legs[0][“end_address”]；
});试试这个：

google.maps.event.addListener（directionsDisplay，'directions_changed'，function（）{
var directionsList=directionsDisplay.getDirections（）；
ComputeTotalInstance（方向列表）；
document.getElementById（“from”）.value=directionsList.routes[0]。legs[0][“起始地址”]；
document.getElementById（“to”）.value=directionsList.routes[0]。legs[0][“end_address”]；
});
是否要调用方向\u changed
事件侦听器中的codeAddress
函数？顺便说一句，这个功能在哪里？我需要导航A和B在输入字段中更新地址。我不知道您在Maps API中加载了两次函数，这不是一件好事。只要做
谢谢。请帮我找到准确的答案。我已删除了两次加载，向我们展示了codemaddress
函数的外观。是否要在方向\u changed
事件侦听器中调用codemaddress
函数？顺便说一句，这个功能在哪里？我需要导航A和B在输入字段中更新地址。我不知道您在Maps API中加载了两次函数，这不是一件好事。只要做
谢谢。请帮我找到准确的答案。我已删除了两次加载，向我们展示了codemaddress
函数的外观。是否要在方向\u changed
事件侦听器中调用codemaddress
函数？顺便说一句，这个功能在哪里？我需要导航A和B在输入字段中更新地址。我不知道你有什么功能