html 使用Google Map API进行地理编码

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用Google Map API进行地理编码相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
	<title>GeoCode</title>

</head>
<body>
	<div id="container"></div>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		var api_key = 'YOUR_API_KEY';
		var gmap_api = 'https://maps.googleapis.com/maps/api/geocode/json?';
		var addresses = ['kajang', 'bangi', 'puchong'];
		var data = [];
		jQuery(document).ready(function($) {
			for (var i = addresses.length - 1; i >= 0; i--) {
				var address = addresses[i]
				$.getJSON(gmap_api, {
					address: address,
					key: api_key,
				}, function(json, textStatus) {
					if(json.results && json.results.length > 0) {
						datum = json.results[0];
						data.push(datum);
						var id = '<p>' + datum.place_id + '</p>';
						var name = '<h4>' + datum.address_components[0]['long_name'] + '</h4>';
						var location = '<p>' + datum.geometry.location.lat + ', ' + datum.geometry.location.lng + '</p>';
						var info = name + id + location + '<hr>';
						$('#container').append(info)
					}
				});
			}
		});
	</script>
</body>
</html>

以上是关于html 使用Google Map API进行地理编码的主要内容，如果未能解决你的问题，请参考以下文章

添加数千个标记 Google Map API V3

使用 Google Maps Javascript API V3 反向地理编码检索邮政编码

Google api 密钥不适用于我的 ios 应用程序

使用 Google maps API 和 Google text Search 进行地理定位

达到了Google Map API客户端限制

Google maps API V3 - 无法对 AutocompleteService 预测进行地理编码