Google Maps（JS）开发入门(4)：使用HTML5 Geolocation属性定位

这是HTML5增加的新属性，在之前的文章中我已经详细介绍过了，本文只是引用的是Google Maps官方的例子。

关于HTML5获取经纬度的详细例子以及详细参数，可以查看这里。关于HTML5 Geolocation其他详细内容，可以查看这里。

本文的效果图

核心代码

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&key=你的KEY&sensor=true"></script>
    <script>
		var map;
		function initialize() {
		  var mapOptions = {
			zoom: 6
		  };
		  map = new google.maps.Map(document.getElementById('map-canvas'),
			  mapOptions);
	  //HTML5 geolocation
	  if(navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position) {
		  var pos = new google.maps.LatLng(position.coords.latitude,
										   position.coords.longitude);

		  var infowindow = new google.maps.InfoWindow({
			map: map,
			position: pos,
			content: 'Location found using HTML5.'
		  });

		  map.setCenter(pos);
		}, function() {
		  handleNoGeolocation(true);
		});
	  } else {
		//如果不支持HTML5
		handleNoGeolocation(false);
	  }
	}
	function handleNoGeolocation(errorFlag) {
	  if (errorFlag) {
		var content = '错误: Geolocation服务获取失败';
	  } else {
		var content = '错误: 浏览器不支持HTML5';
	  }
	  var options = {
		map: map,
		position: new google.maps.LatLng(60, 105),
		content: content
	  };
	  var infowindow = new google.maps.InfoWindow(options);
	  map.setCenter(options.position);
	}
	google.maps.event.addDomListener(window, 'load', initialize);
&lt;/script&gt;

</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

把这段代码直接复制保存为.html文件，然后修改你的API Key即可使用。

后话

因为在写本文之前已经写过了利用html5获取经纬度并且在google map显示位置，更多详细内容请移步。