javascript - 如何连接谷歌地图中的两点..？

Question

    function createLine()
{

        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(7.5653, 80.4303);
        var mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("directionpanel"), mapOptions);

        var address = document.getElementById('startvalue').value;
        var address2 = document.getElementById('endvalue').value;

        var temp, temp2;

        geocoder.geocode({ 'address': address }, function (results, status) {
            temp = results[0].geometry.location;
        });
        geocoder.geocode({ 'address': address2 }, function (results, status) {
            temp2 = results[0].geometry.location;
        });

        var route = [
          new google.maps.LatLng(temp),
          new google.maps.LatLng(temp2)
        ];


    var polyline = new google.maps.Polyline({
        path: route,
        strokeColor: "#ff0000",
        strokeOpacity: 0.6,
        strokeWeight: 5
    });

    polyline.setMap(map);


}

我想画一条直线来连接两个点，我不会计算那条线的距离。我尝试使用此代码连接点的任何方式，但它不起作用。请帮助我..

Answer 1

地理编码是异步的。尝试这样的事情（从第一个回调中调用第二个地理编码器操作，在第二个回调中使用两者的结果）。

function createLine()
{

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(7.5653, 80.4303);
    var mapOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("directionpanel"), mapOptions);

    var address = document.getElementById('startvalue').value;
    var address2 = document.getElementById('endvalue').value;

    var temp, temp2;

    geocoder.geocode({ 'address': address }, function (results, status) {
        temp = results[0].geometry.location;
        geocoder.geocode({ 'address': address2 }, function (results, status) {
            temp2 = results[0].geometry.location;

        var route = [
          temp,
          temp2
        ];

        var polyline = new google.maps.Polyline({
            path: route,
            strokeColor: "#ff0000",
            strokeOpacity: 0.6,
            strokeWeight: 5
        });

        polyline.setMap(map);
        });
    });
}

工作示例

代码片段：

var geocoder;
var map;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(7.5653, 80.4303);
  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);

  createLine();
}

function createLine() {

  var address = document.getElementById('startvalue').value;
  var address2 = document.getElementById('endvalue').value;

  var temp, temp2;

  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status != "OK") alert("geocode of address:" + address + " failed, status=" + status);
    temp = results[0].geometry.location;
    document.getElementById('results').innerHTML += temp.toUrlValue() + "<br>";
    geocoder.geocode({
      'address': address2
    }, function(results, status) {
      if (status != "OK") alert("geocode of address:" + address + " failed, status=" + status);
      temp2 = results[0].geometry.location;
      document.getElementById('results').innerHTML += temp2.toUrlValue() + "<br>";

      var route = [
        temp,
        temp2
      ];

      var polyline = new google.maps.Polyline({
        path: route,
        strokeColor: "#ff0000",
        strokeOpacity: 0.6,
        strokeWeight: 5
      });

      var lengthInMeters = google.maps.geometry.spherical.computeLength(polyline.getPath());
      // alert("polyline is "+lengthInMeters+" long");            
      document.getElementById('results').innerHTML += "Polyline is " + lengthInMeters + " meters long<br>";

      polyline.setMap(map);
      var bounds = new google.maps.LatLngBounds();
      bounds.extend(temp);
      bounds.extend(temp2);
      map.fitBounds(bounds);
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  margin: 0;
  padding: 0;
  height: 100%;
}

<input id="startvalue" type="text" width="90" value="Megaswewa, Sri Lanka"></input>
<input id="endvalue" type="text" width="90" value="Kandy, Sri Lanka"></input>
<input type="button" value="Geocode" onclick="createLine()"></input>
<div id="map" style="width:600px;height:500px;"></div>
<div id="results"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>