在一些网站上，我们经常会看到一些地址会有一个图标的形式展现，当你点击的时候就会加载一个你点击区域的地图出来，很神奇的一个功能，在之前是没有这样功能的，都是直接写上地址，你要去的话自己找去吧，现在有了这个人性化的工具之后，我们要找什么地点就明确很多了，在上面可以看到周围的具体环境啊，什么的，交通啊什么的都可以查到，那么，思考一下，要实现这个功能好像十分的困难吧，居然把一个地图给精确定位，太不可思议了。

　　十分方便的是，我们的html5就能够轻松的帮助我们搞定这个事情，下面我就介绍一下怎么实现地图的呈现。

　　首先我们需要百度地图API的接口，第一步，在百度的搜索栏输入“百度地图API”当页面发生跳转的时候找到“申请密钥”按钮，点击之后在开发的位置会出现三个javascript 极速版，大众版，开源库，点击选择大众版，之后跳转页面之后，就是获得密钥了，紧接着在API控制台同意条件，然后就是一个繁琐的注册阶段，相信大家都会，这个这册的话是可以取得五个免费的API接口的，当注册完成之后就可以创建我们的应用了。紧接着就将我们的密钥复制粘贴到访问应用AK 那个地方，最后就是在浏览器中设置允许网站跟踪您的位置，这样我们的前期准备工作就做好了，剩下的就是页面上的事情了。

　　我们需要在页面上有一个div来显示我们的地图展示，还需要js代码来执行，不过不用担心，百度已经帮我们写好了代码，我们只需要直接应用就可以了，

<p id="p1"></p>---------》用来存放一会儿我们获得当地的坐标点的数据；

<button οnclick="getLocation()">click</button>  在这里我们准备了一个函数用来触发获取位置这个事件，

接下来就是我们的js代码：

<script type="text/javascript">
var p1=document.getElementById("p1")
function getLocation()
{

if (navigator.geolocation)
{
alert(1);---------------->主要是用在这里作为测试，这是为了直观显示所以用了alert方法，不过这个方法会阻止代码的加载，所以还是建议用cconsole.log控制台输出。
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}---------->如果浏览器不支持的话，弹出这句话提示用户。
}
function showPosition(position)
{
p1.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;-------------------------》在这里显示获取的经度和纬度。
}
</script>

function showPosition(position)
{
var la= position.coords.latitude
var lo =position.coords.longitude

var map = new BMap.Map("container"); ----------》创建Map实例
map.centerAndZoom(new BMap.Point(lo,la), 15); ——————》初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); -------------》添加平移缩放控件
map.addControl(new BMap.ScaleControl()); -------------》添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); ----------》滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); -------------->添加地图/添加缩略地图控件
map.enableScrollWheelZoom();-------------->启用类型控件
map.setCurrentCity("成都"); ----------------->设置地图显示的城市 此项是必须设置的
}

既然我们可以

利用电脑进行定位，那么同时也可以用手机做一个导航的效果，但是前提是必须具备精准的导航功能，

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）；

clearWatch() - 停止 watchPosition() 用clear方法进行清除watchPosition()方法，

下面我们进行手机的导航

同样是给一个p标签存放我们一会儿得到的坐标的数据，

var x=document.getElementById("p1")
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude
}

主要的原理和我们上面讲到的百度地图API相似，我们的html5的功能确实很强大，但是并不是万能的，当然还是存在着一定的问题，所以在学习的时候进行有选择的吸收。