无法获取gmaps地理编码数据 [英] Cannot get gmaps geocoding data

问题描述

 < form> 
< input id =distancename =kmtype =hidden> 
< / form> 
  

我只想填充用户选择的2个地址之间的距离。然后，我只需将它提交给表单，并使用它完成服务器的任务。这里我称之为 calculateDistance func：

  $（'＃my_form_id' ）.on（submit，function（e）{
 calculateDistance（）; 
 // other stuff 
 return true; 
}）; 
  

这就是我想要得到的距离：

  function calculateDistance（）{
 var startPoint = $（'＃main_from_route_input'）。val（）; 
 var endPoint = $（'＃main_to_route_input'）。val（）; 
 var geocoderStart = new google.maps.Geocoder（）; 
 var geocoderEnd = new google.maps.Geocoder（）; 
 var coordsStart，coordsEnd; 
 
 geocoderStart.geocode（{'address'：startPoint}，function（response，status）{
 if（status！= google.maps.GeocoderStatus.OK）{
 alert （'首地址的地理编码失败：'+ status）; 
} 
 coordsStart = response [0] .geometry.location; 
 
 geocoderEnd.geocode（{'address'： endPoint}，函数（响应，状态）{
 if（status！= google.maps.GeocoderStatus.OK）{
 alert（'第二个地址的地理编码失败：'+状态）; 
 } 
 coordsEnd = response [0] .geometry.location; 
 var distance =（google.maps.geometry.spherical.computeDistanceBetween（coordsStart，coordsEnd）/ 1000）.toFixed（2）; 
 $（'＃distance'）.val（distance）; 
}）; 
}）; 
} 
  

我想出了上面的解决方案。但我甚至没有进入回调函数。当我调试并获得回调时，它会被跳过。代码似乎是正确的（和其他答案中一样）。问题在哪里？

我收到的地址值为'Copenhagen，Denmark'和'Berlin，Germany'，例如。我尝试使用google代码snipet的建议，如下所示：'Copenhagen，+ Denmark'（空白空间替换为 +

解决方案

问题：

1. 您无法从异步回调函数返回任何内容，您需要使用回调函数中的数据。 然后在所有回调处理完成后提交表单。
   
2. 您正在计算直线距离（ computeDistanceBetween ）并将其与驾驶距离进行比较。
   

概念证明小提琴

代码段：

strong>

  html，body，＃map_canvas {height：500px;宽度：500px; margin：0px; < script src =https：//   

I have a hidden field inside a form:

<form> 
     <input id="distance" name="km" type="hidden">
</form>

And I just want to populate this field with the distance between 2 addresses, chosen by the user. Then I simply submit it with the form and do the server stuff with it. Here I call the calculateDistance func:

$('#my_form_id').on("submit", function (e) {
    calculateDistance();
    // other stuff
    return true;
});

This is how I'm trying to get the distance:

function calculateDistance() {
    var startPoint = $('#main_from_route_input').val();
    var endPoint = $('#main_to_route_input').val();
    var geocoderStart = new google.maps.Geocoder();
    var geocoderEnd = new google.maps.Geocoder();
    var coordsStart, coordsEnd;

geocoderStart.geocode({'address': startPoint}, function (response, status) {
    if(status != google.maps.GeocoderStatus.OK){
        alert('Geocode of first address failed: ' + status);
    }
    coordsStart = response[0].geometry.location;

    geocoderEnd.geocode({'address': endPoint}, function (response, status) {
        if(status != google.maps.GeocoderStatus.OK){
            alert('Geocode of second address failed: ' + status);
        }
        coordsEnd = response[0].geometry.location;
        var distance = (google.maps.geometry.spherical.computeDistanceBetween(coordsStart, coordsEnd) / 1000).toFixed(2);
        $('#distance').val(distance);
    });
});
}

I came up with the upper solution. But I don't even get into the callback functions. When I debug and get to the callback, it is just skipped. The code seems to be correct (the same as in other answers). Where is the problem?

I receive the addresses values as 'Copenhagen, Denmark' and 'Berlin, Germany', for example. I tried making it as in google code snipet suggestions, as follows: 'Copenhagen,+Denmark' (empty space is replaced with a +), but doesn't work still.

解决方案

Issues:

1. you can't return anything from an asynchronous callback function, you need to use the data inside the callback function.
2. you are submitting the form before the geocoded results have come back (return false in the onsubmit function, then submit the form once all the callback processing has completed.
3. You are calculating the straight line distance (computeDistanceBetween) and comparing that to the driving distance.

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  calculateDistance();
}

function calculateDistance() {
  var bounds = new google.maps.LatLngBounds();
  var path = [];
  var startPoint = $('#main_from_route_input').val();
  var endPoint = $('#main_to_route_input').val();
  var geocoderStart = new google.maps.Geocoder();
  var geocoderEnd = new google.maps.Geocoder();
  var coordsStart, coordsEnd;

  geocoderStart.geocode({
    'address': startPoint
  }, function(response, status) {
    if (status != google.maps.GeocoderStatus.OK) {
      alert('Geocode of first address failed: ' + status);
    }
    coordsStart = response[0].geometry.location;
    bounds.extend(coordsStart);
    var startMark = new google.maps.Marker({
      position: coordsStart,
      map: map,
      title: "start"
    });
    path.push(coordsStart);
    geocoderEnd.geocode({
      'address': endPoint
    }, function(response, status) {
      if (status != google.maps.GeocoderStatus.OK) {
        alert('Geocode of second address failed: ' + status);
      }
      coordsEnd = response[0].geometry.location;
      bounds.extend(coordsEnd);
      var endMark = new google.maps.Marker({
        position: coordsEnd,
        map: map,
        title: "end"
      });
      path.push(coordsEnd);
      var polyline = new google.maps.Polyline({
        path: path,
        map: map
      });
      var distance = (google.maps.geometry.spherical.computeDistanceBetween(coordsStart, coordsEnd) / 1000).toFixed(2);
      $('#distance').val(distance);
      map.fitBounds(bounds);
    });
  });
}

google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<form>
  <input id="distance" name="km">
  <input id="main_from_route_input" value="Copenhagen, Denmark" />
  <input id="main_to_route_input" value="Berlin, Germany" />
</form>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

这篇关于无法获取gmaps地理编码数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！