从两个输入框到Google Maps API的绘图距离 [英] Plot Distance from two Input boxes to Google Maps API

问题描述

如何使用两个输入框自动完成两个不同的纬度/经度点，并使用最新的API在Google Maps上进行绘制?

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?

假设到目前为止我有下面的JS

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); 
    }
});

在下面的HTML中，我还有一个起点和终点输入框

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">

通过单击提交按钮将两个位置绘制到Google Maps API的最佳方法是什么?

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

谢谢

我想使用示例中实现的距离矩阵API 或类似此处 a>，但是我真的不知道如何使用我要使用的输入框来实现这两个.

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.

推荐答案

路线服务无法在这些位置之间找到路线(与它们相关联的名称在经度上带有错误的符号).

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.

概念提琴证明

代码段:

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>

这篇关于从两个输入框到Google Maps API的绘图距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！