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

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

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

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

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

<button onclick="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的功能确实很强大,但是并不是万能的,当然还是存在着一定的问题,所以在学习的时候进行有选择的吸收。

html5 的百度地图连接的更多相关文章

  1. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  2. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

  3. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

  4. HTML5结合百度地图API创建地图应用

    具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid ...

  5. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

  6. HTML5地理定位,百度地图API,知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  7. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  8. html5 geolocation配合百度地图api实现定位

    1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置.鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用时 ...

  9. 使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置

    最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...

随机推荐

  1. linux dd命令参数及用法详解---用指定大小的块拷贝一个文件(也可整盘备份)

    linux dd命令参数及用法详解---用指定大小的块拷贝一个文件 日期:2010-06-14 点击:3830 来源: 未知 分享至:            linux dd命令使用详解 dd 的主要 ...

  2. cognos启动报错

    [ ERROR ] Content Manager is unable to process your request because an unexpected event occurred in ...

  3. 在Win7下用XManager远程控制ubuntu

    在Win7下用XManager远程控制ubuntu   远程主机通过xdmcp协议连接到ubuntu的图形终端,以图形终端方式登录. 远程主机是win7.ubuntu装在VMware虚拟机上,ubun ...

  4. C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常,不存在从对象类型System.Windows.Forms.DateTimePicker到已知的托管提供程序本机类型的映射。

    一:C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常 其实,这个问题与C#的垃圾回收有关.垃圾回收器管 理所有的托管对象,所有需要托管数据的.NET语言(包括 C#)都受运行库的 垃圾回收器 ...

  5. supesite 相关 修改

    1.修改 站点名称及logo http://faq.comsenz.com/viewnews-594 2.supesite 如何 收录论坛 http://faq.comsenz.com/viewnew ...

  6. MVC4 中Remote的使用

    相信当你看到这篇文章的时候对remote是有一些了解了, 起码知道这个东西是来干嘛用的. 这里也就不废话了 直接上代码  看看Remote的一些使用方式. 1.判断表单上输入的数据是否存在 [Syst ...

  7. JavaScript中的加号

    JavaScript中的加号“+”可以作为数学运算符的加,也可以作为字符串拼接,也可以作为一元运算符,表示正数. 1+2 "2"+"3" 3+"2&q ...

  8. hdoj 4552 怪盗基德的挑战书【求前缀在字符串中出现的次数之和】

    怪盗基德的挑战书 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Su ...

  9. 理解RESTful架构(转)

    理解RESTful架构   作者: 阮一峰 http://www.ruanyifeng.com/blog/2011/09/restful 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这 ...

  10. 统计学习导论:基于R应用——第二章习题

    目前在看统计学习导论:基于R应用,觉得这本书非常适合入门,打算把课后习题全部做一遍,记录在此博客中. 第二章习题 1. (a) 当样本量n非常大,预测变量数p很小时,这样容易欠拟合,所以一个光滑度更高 ...