2015-12-14

html5地理定位

前言

今天看了一点html5，发现它相对于html添加了很多新特性，比如画布，可以播放视频音频等。但是我印象比较深刻的是这个地理定位，html5中有一个geolocation API，通过它可以获取当前我的位置。所以我动手实践了一下。这个接口需要的浏览器支持是：Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera。我使用的是Chorme。

使用百度API

由于我是想在地图中显示我的位置，所以需要引入地图。这里我使用了百度地图的API。首先看一下能否成功。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>测试html5地理定位</title>
<script src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript">
    function initialize(){
        //初始化地图
        var map = new BMap.Map("map");
        //确定中心点，这里我使用的是苏州独墅湖某点
        var point = new BMap.Point(120.730435, 31.273391);
        //在地图中将中心点定位到point，地图级别为15
        map.centerAndZoom(point, 15);
        map.addControl(new BMap.NavigationControl());
    }
    window.onload = initialize;
   </script>
</head>
<body>
<div id="map" style="width:400px;height:400px"></div>
</body>
</html>

可以得到结果以point为中心的一块区域
suzhou