像卫星导航一样的方向嵌入到网站中

Question

是否有办法将卫星导航地理位置类型映射嵌入到网站中?基本上是给你一个接一个的实时方向。

这样的

我知道谷歌地图应用程序有这个功能，但我需要这个实现到一个网站，任何指导将是伟大的。

谢谢

Answer 1

谷歌地图，不只是应用程序，有这个功能。
你可以使用他们的JavaScript API
你可以在他们的api中找到示例和文档。你需要使用他们的导航服务

要在Google Maps JavaScript API中使用方向，需要创建一个对象类型为DirectionsService，呼叫DirectionsService.route()为初始化对Directions服务的请求，并将其传递给DirectionsRequest对象字面值包含输入项和a在收到响应时执行的回调方法。

DirectionsRequest对象字面值包含以下字段:

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

启动对DirectionsService的指令请求route()方法需要传递一个回调函数完成服务请求。这个回调将返回响应中的DirectionsResult和DirectionsStatus代码。

下面的示例将发出指示请求并在directionsPaneldiv

中显示响应

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function calcRoute() {
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

HTML正文:

<div id="map" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>