Plot Distance from two Input boxes to Google Maps API

问题

How can I use two input boxes that autocompletes two different latitude/longitude points and have that plotted on a Google Maps using the latest API?

Suppose I have the JS below so far

var data = {
    "LAX": {
        "t": "33.9416",
        "g": "118.4085",
        "n": "Los Angeles International Airport"
    },
        "JFK": {
        "t": "40.6413",
        "g": "73.7781",
        "n": "John F. Kennedy International Airport"
    },
        "BWI": {
        "t": "39.1774",
        "g": "76.6684",
        "n": "Baltimore–Washington International Airport"
    }
};

function getAirports() {
    var arr = [];
    for (airport in data) {
        if (data.hasOwnProperty(airport)) {
            arr.push(airport + " - " + data[airport].n);
        }
    }
    window.console&&console.log(arr);
    return arr;
}
$("#origin").autocomplete({
    source: getAirports(),
    select: function (event, ui) {
      var value = ui.item.value;
      var airport = data[value.split(" -")[0]];
      $("#output1").html(value+"<br>t:"+airport.t+"<br>t:"+airport.g); 
    }
});
$("#destination").autocomplete({
    source: getAirports(),
    select: function (event, ui) {
      var value = ui.item.value;
      var airport = data[value.split(" -")[0]];
      $("#output2").html(value+"<br>t:"+airport.t+"<br>t:"+airport.g); 
    }
});

And I also have an origin and destination input boxes in HTML below

<div class="ui-widget">
    <label for="origin">Origin:</label>
    <input id="origin">
</div>
    <div id="output1"></div>

<div class="ui-widget">
    <label for="destination">Destination:</label>
    <input id="destination">
</div>
    <div id="output2"></div>
<input type="submit" value="Submit">

What is the best way for the two locations to be plotted to Google Maps API with the submit button click?

Thanks

Edit:

I want to either use the Distance Matrix API that's implemented in the example here or something like the Directions example used here but I do not really know how to implement either of those with the input boxes that I want to use.

回答1:

The directions service can't find directions between those locations (the have the wrong sign on the longitude for the names associated with them).

If you want to create a map and add directions, you need to write code to do that, the example in the documentation is a good starting place.

proof of concept fiddle

code snippet:

var geocoder;
var map;
var originCoords;
var destCoords;
var markerOrigin, markerDest;
var directionsService;
var directionsDisplay;

function initialize() {
  directionsService = new google.maps.DirectionsService;
  directionsDisplay = new google.maps.DirectionsRenderer;
  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
    });
  directionsDisplay.setMap(map);
  $("#origin").autocomplete({
    source: getAirports(),
    select: function(event, ui) {
      var value = ui.item.value;
      var airport = data[value.split(" -")[0]];
      $("#output1").html(value + "<br>t:" + airport.t + "<br>g:" + airport.g);
      originCoords = new google.maps.LatLng(parseFloat(airport.t), parseFloat(airport.g));
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    }
  });
  $("#destination").autocomplete({
    source: getAirports(),
    select: function(event, ui) {
      var value = ui.item.value;
      var airport = data[value.split(" -")[0]];
      $("#output2").html(value + "<br>t:" + airport.t + "<br>g:" + airport.g);
      destCoords = new google.maps.LatLng(parseFloat(airport.t), parseFloat(airport.g));
      calculateAndDisplayRoute(directionsService, directionsDisplay)
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
var data = {
  "LAX": {
    "t": "33.9416",
    "g": "-118.4085",
    "n": "Los Angeles International Airport"
  },
  "JFK": {
    "t": "40.6413",
    "g": "-73.7781",
    "n": "John F. Kennedy International Airport"
  },
  "BWI": {
    "t": "39.1774",
    "g": "-76.6684",
    "n": "Baltimore–Washington International Airport"
  }
};

function getAirports() {
    var arr = [];
    for (airport in data) {
      if (data.hasOwnProperty(airport)) {
        arr.push(airport + " - " + data[airport].n);
      }
    }
    window.console && console.log(arr);
    return arr;
  }
  // from https://developers.google.com/maps/documentation/javascript/examples/directions-simple

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  if ((originCoords instanceof google.maps.LatLng) && (destCoords instanceof google.maps.LatLng)) {
    if (!markerOrigin || !markerOrigin.setPosition) {
      markerOrigin = new google.maps.Marker({
        map: map,
        position: originCoords
      })
    } else {
      markerOrigin.setPosition(originCoords)
    }
    if (!markerDest || !markerDest.setPosition) {
      markerDest = new google.maps.Marker({
        map: map,
        position: destCoords
      })
    } else {
      markerDest.setPosition(destCoords)
    }
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(originCoords);
    bounds.extend(destCoords);
    map.fitBounds(bounds);

    directionsService.route({
      origin: originCoords,
      destination: destCoords,
      travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="ui-widget">
  <label for="origin">Origin:</label>
  <input id="origin">
</div>
<div id="output1"></div>

<div class="ui-widget">
  <label for="destination">Destination:</label>
  <input id="destination">
</div>
<div id="output2"></div>
<input type="submit" value="Submit">
<div id="map_canvas"></div>

来源：https://stackoverflow.com/questions/38110250/plot-distance-from-two-input-boxes-to-google-maps-api