在页面中引入百度地图API的步骤以及Geolocation简单的使用

来源：互联网发布：二维数组整体排序java 编辑：程序博客网时间：2024/06/06 10:23

在页面中想要展示的页面中使用百度地图的API十分的简单而且是十分有用的。下面先介绍一些HTML5中地理位置的一些知识。
地理位置(Geolocation)是HTML5中重要的特性之一。提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用，使得开发人员不用借助其他软件就能轻松实现位置查找，地图应用，导航等功能。

Geolocation的基本原理

1. GPS

GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离，然后综合多颗卫星的数据就可知道接收机的具体位置。适用于具备GPS功能的设备
优点：在空旷地区比较准确，覆盖面比较广
缺点：需要比较长时间定位，比较耗电池，在室内不太好，需要
GPS设备支持

2. WIFI

地理定位服务提供者会在全世界范围内去收集WIFI热点的位置信息，然后用户的设备只要能支持WIFI就能获取到周围WIFI热点的位置和信号强弱信息，然后把这些信息发给提供者，就能得到自己的位置.
优点：比较准确，适用于室内环境，相应速度快
缺点：在wifi热点少的地方不适用

3. IP定位

原理很简单，就是通过你设备的物理地址所备案的地址信息来定位，但这种方式精确度不高，特别是用代理来
上网的情况下。一般作为GPS和WIFI都不支持的情况下大致模糊匹配，比如各大团购网站检测用户所在城市

4. 手机基站

和WIFI原理类似，Apple的设备就是把WIFI和基站信息结合起来进行定位。

实现

1. 核心对象

①Geolocation是window.navigator下面的一个对象，该对象提供了实现地理位置定位的接口。
②要用该功能首先判断浏览器是否支持navigator.geolocation该对象。

2. Geolocation对象详解

getCurrentPosition(success,error,options)该方法是实现地理定位的核心方法，该方法能够对获取到的信息作出处理以及设置。
A.success(position) 获取信息成功的回调函数
B.error(errorcode)获取信息失败的回调函数
C.options获取信息前可以按照你的需求来设置一些参数

success(positon) 获取信息成功的回调函数

当成功获得信息的时候，会自动调用success函数，而这个函数会自动生成一个包含返回地理信息的position对象，如下：
A.coords.latitude（纬度）
B.coords.longitude（经度）
C.coords.altitude（海拔）
D.coords.accuracy（位置精确度）
E.coords.altitudeAccuracy(海拔精确度)
F.coords.heading（朝向）
G.coords.speed (速度)
H.timestamp(响应的日期/时间)

error(errorCode)获取对象失败的回调函数

A. 地理信息会因为各种因素，例如信号不好等等而出错。因此当获取信息失败的时候会自
动调用getCurrentPosition的第二个参数，即error函数，这个函数会自动生成一个包含错
误代码和错误信息的对象作为其参数，code是错误代码，message是错误信息。

switch(errorcode.code){ case 1 :alert(errorcode.message);//用户选了不允许break; case 2:alert(errorcode.message);//连不上GPS卫星，或者网络断了break; case 3: alert(errorcode.message);//超时了break; default:alert(errorcode.message);//未知错误，其实是err.code==0的时候 break; }

option 设置一些参数

options是一个对象，可以设置超时时间、缓存时间等，
如下：
A.enableHighAccuracy 表示是否允许使用高精度，但这个
参数在很多设备上设置了都没用，设备综合考虑电量、
地理情况等，很多时候都是默认的由设备自身来调整。
B.timeout 指定超时时间
C.maximumAge 是指缓存的时间

其余方法

watchPosition(success,error,options) 表示重复获取地理位置，相当于将getCurrentPosition这个方法利用setinterval不断执行，其他用法和参数使用一样。
2.clearWatch()用来清除前一次获取的位置信息。
这个两个方法配合使用，能够实现一些很棒的功能，比
如说：导航等！

引入百度地图

下面就以引入百度地图的API为例子阐述一下百度地图API的使用方法和简单的代码引用
1. 先进入百度地图API的首页(百度搜索百度地图API即可)就能看到下面的页面：
这里写图片描述
2. 然后先点击上图中的申请密钥，按照流程流程申请一个密钥，填写完成之后用邮件激活一下就可以得到下面的情况：
3. 然后点击页面最下方的想用什么开发：
4. 我们以其中的随便一个为例子：
5. 把“你的密钥改“为刚才你申请的那个密钥就可以了：这里写图片描述

简单小DEMO

然后根据前面的解释我们能自己动手做一个小例子：

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    <style type="text/css">        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}    </style>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>    <title>地图展示</title></head><body><div id="allmap"></div></body></html><script type="text/javascript">    function success(pos)  {        var la = pos.coords.latitude;        var lo = pos.coords.longitude;        alert(la);        // 百度地图API功能        var map = new BMap.Map("allmap");    // 创建Map实例        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放        var local = new BMap.LocalSearch(map, {            renderOptions: {map: map, panel: "r-result"}        });        local.search("食堂");    }    function error(errorCode) {        alert(errorCode.code+"--"+errorCode.message);  //打印错误代码和错误信息    }    var  option = {};  //不设置任何参数    if(navigator .geolocation)  {//如果浏览器支持的话        navigator.geolocation.getCurrentPosition(success,error,option);  //获得当前的额位置    } else {        alert("no spport");    }</script>

1 0