使用地图、地点和方向API

谷歌地图API是一个网络地图API，允许开发者在网站中轻松添加地图。该API提供了卫星视图、街道视图、航空摄影和街道地图。

这个API被用来定位企业、运动场、道路和街道等地方。更有趣的是，能够将方向和地点API与谷歌地图API结合起来。

这三者结合使用时，可以提供一个有用的应用程序，用户可以在网页上导航、寻找方向和估计距离。这些都是一些功能，当嵌入到一个网站中时，可以增加网络应用的可用性。

项目目标

这个项目的唯一目的是让读者了解谷歌地图使用的各种API的核心功能和应用。

我们将创建一个显示地图的网页，给用户两个带有地点自动完成的输入字段；一个起点和一个目的地，计算它们之间的距离，并显示两个地点之间的最短路径。

项目文件和文件夹组织

我们将创建一个名为resource 的文件夹。在这个文件夹中，我们将存储我们的引导文件。

接下来，我们将创建三个文件，名为index.html ，style.css 和app.js 。index.html 将包含我们的前端组件。

style.css 将包含我们网页的样式，而app.js 将有实现API的驱动代码。

设置API密钥

我们需要为我们要使用的每个模块设置一个API密钥。然而，如果我们在Google Console中创建一个项目并添加API，我们就可以使用一个密钥来使用几个API。

要设置API密钥。

前往Google Console
创建一个新的项目，然后给它一个名字。
选择该项目，并选择APIs and Services 。
点击ENABLE APIS AND SERVICES 。
在API库中，启用Directions API,Distance Matrix API,Places API, 和MapsJavascript API 。
接下来，我们需要创建一个API-Key 。在仪表板上，进入APIs & Services 。
在凭证屏幕下，点击CREATE CREDENTIALS ，然后复制创建的API密钥。

网页设计

在这一节中，我们将创建一个网页，我们的应用程序将在这个网页上显示地图。

我们将有一个带有两个输入字段的表格。一个字段将用于输入起点，第二个字段用于输入期望的目的地。

在index.html 文件中，添加下面的片段。

<form class="form-horizontal">
	<div class="form-group">
		<label for="from" class="col-xs-2 control-label"
			><i class="far fa-dot-circle"></i
		></label>
		<div class="col-xs-4">
			<input
				type="text"
				id="origin"
				placeholder="Origin"
				class="form-control"
			/>
		</div>
	</div>
	<div class="form-group">
		<label for="to" class="col-xs-2 control-label"
			><i class="fas fa-map-marker-alt"></i
		></label>
		<div class="col-xs-4">
			<input
				type="text"
				id="destination"
				placeholder="Destination"
				class="form-control"
			/>
		</div>
	</div>
</form>

接下来，我们将有一个按钮，调用一个函数来计算这两个地方之间的驾驶距离。

通过同样的函数，我们将估算出计算出的距离所需的时间，并在地图上画出从起点到目的地的最短路径。

<div class="col-xs-offset-2 col-xs-10">
	<button class="btn btn-success btn-lg " onclick="calculateDistance();">
		<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>
	</button>
</div>

最后，我们将在网页上显示地图，并在地图下面显示函数的。

<div class="container-fluid">
	<div id="googleMap"></div>
	<div id="output"></div>
</div>

带上API密钥

我们需要带上我们从Google Cloud Console生成的API密钥，使我们的项目能够访问Google Maps和其他地图服务。

把复制的API Key 粘贴到一个脚本标签中，就在正文标签的下方，如下图所示。

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR API KEY"></script>

编码JavaScript函数

现在，我们要创建函数，使所述的活动工作。

在同一文件夹中创建一个名为app.js 的新文件和index.html 文件。

通过在body 标签的结尾处添加下面的片段来连接这两个文件。

<script src="app.js"></script>

设置地图位置

谷歌地图覆盖整个世界。由于这个原因，我们不能在一个网页上显示它。我们需要选择一个小的地理位置来显示我们的地图。

我的地图覆盖了肯尼亚内罗毕附近的地区。我选择这个地点是因为它是我居住的地方，而且我对该地区周围的城镇和城市很熟悉。

要选择一个地点，确保你知道该地点所在的经纬度，然后在下面的片段中适当地改变它们。

//set map options
var myLatLng = { lat: 1.2921, lng: 36.8219 };
var mapOptions = {
	center: myLatLng,
	zoom: 7,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
};

我还在脚本中设置了zoom 和maptype 的级别。地图类型指定你希望你的地图显示地理特征还是道路。我选择了ROADMAP ，在地图上显示道路。

在网页上创建地图

在我们的index.html 文件中，我们给出了一些div 元素和id=googleMap 。为了在同一个div 标签中呈现创建的地图，在app.js 文件中添加下面的片段。

//create map
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);

Map on webpage

使用方向服务

方向服务负责在地图上给出从一个点到另一个点的方向。

首先，我们需要使用下面的代码段从谷歌调用该服务。

/**
 * Direction service object
 */
var directionsService = new google.maps.DirectionsService();

接下来，我们需要在我们之前创建的同一个地图对象上渲染方向。

我们调用将在地图上显示路径的DirectionsRenderer() ，然后使用setMap(map) 方法指定它在我们的地图上渲染。

/**
 * Render the direction object
 */
var directionsDisplay = new google.maps.DirectionsRenderer();

/**
 * Display the directions on the map by binding the directions service to the map service
 */
directionsDisplay.setMap(map);

城市的自动完成

自动完成功能使地图能够在用户实时输入地方时自动完成。我们使用Places API来启用自动完成功能。

要添加城市的自动完成功能，我们需要带来输入，然后通过在选项对象中指定国家来限制谷歌显示特定国家的城市名称，如下图所示。

/**
 * Adding autocomplete feature for cities
 */
var options = {
	types: ["(cities)"],
	componentRestrictions: { country: "ke" },
};

var input1 = document.getElementById("origin");
var autocomplete1 = new google.maps.places.Autocomplete(input1, options);

var input2 = document.getElementById("destination");
var autocomplete2 = new google.maps.places.Autocomplete(input2, options);

autocomlete of cities

最后，我们需要在选择一个给定的城市后删除城市的下拉列表。

使用下面的片段。

google.maps.event.removeListener(autocomplete1);
google.maps.event.removeListener(autocomplete2);

计算城市之间的距离

在这一点上，我们可以在网页上显示地图，并渲染从起点到终点的方向。

接下来，我们需要计算从原点到目的地的距离，并估算出驾驶这一距离的时间。

我们将首先用我们的origin ，destination ，以及旅行模式，在我们的例子中是DRIVNG 。

/**
 * Creating a new request
 */
var request = {
	origin: document.getElementById("origin").value,
	destination: document.getElementById("destination").value,
	travelMode: google.maps.TravelMode.DRIVING, //WALKING, BYCYCLING, TRANSIT
	unitSystem: google.maps.UnitSystem.IMPERIAL,
};

接下来，我们将把请求传递给DirectionsService() 的route() 方法，该方法将检查该方向是否可用。

如果请求的方向是可用的，该函数将计算起点和终点之间的距离，并将获得的路径存储在result 参数中。

如果方向不可用，该函数将从地图中删除该路线。

地图会被重新定位到当前位置，函数会返回一个错误信息，告诉用户它没有获得所要求的方向。

function calculateDistance(){
   /**
   * Creating a new request
   */
   var request = {
     origin: document.getElementById("origin").value,
     destination: document.getElementById("destination").value,
     travelMode: google.maps.TravelMode.DRIVING, //WALKING, BYCYCLING, TRANSIT
     unitSystem: google.maps.UnitSystem.IMPERIAL
   }

   /**
   * Pass the created request to the route method
   */

   directionsService.route(request, function (result, status) {
     if (status == google.maps.DirectionsStatus.OK) {

       /**
       * Get distance and time, then display on the map
       */
       const output = document.querySelector('#output');
       output.innerHTML = "<p class='alert-success'>From:
       " + document.getElementById("origin").value + "</br>" +"
       To: " + document.getElementById("destination").value +
       "</br>"+"Driving distance <i class='fas fa-road'></i> : " +
        result.routes[0].legs[0].distance.text +"</br>"+
        " Duration <i class='fas fa-clock'></i> : " +
        result.routes[0].legs[0].duration.text + ".</p>";

       /**
       * Display the obtained route
       */
       directionsDisplay.setDirections(result);
     } else {
       /**
       * Eliminate route from the map
       */
       directionsDisplay.setDirections({ routes: [] });

       /**
       * Centre the map to my current location
       */
       map.setCenter(myLatLng);

       /**
       * show error message in case there is any
       */
       output.innerHTML = "<div class='alert-danger'><i class='fas fa-exclamation-triangle'></i> Could not retrieve driving distance.</div>";
     }
   });
}

Finding Directions on Map

总结

在这篇文章中，我们学习了如何在一个项目中使用三种不同的地图API。

我们建立了一个网页，实现了在给定地图中填补地方的自动完成，并使用方向API在地图上的两个地点之间画出一个方向。

我们还使用API来计算两个不同地方之间的距离，以及估计完成这个距离所需的时间。

如何使用地图、地点和方向API