自从HTML5的标准确定以后，越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多，但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例。请看下面代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <title>HTML5调用百度地图API进行地理定位实例</title>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>
  7. </head>
  8. <body style="margin:50px 10px;">
  9. <div id="status" style="text-align: center"></div>
  10. <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
  11. </body>
  12. </html>
  13. <script type="text/javascript">
  14. //默认地理位置设置为上海市浦东新区
  15. var x=121.48789949,y=31.24916171;
  16. window.onload = function() {
  17. if(navigator.geolocation) {
  18. navigator.geolocation.getCurrentPosition(showPosition);
  19. document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
  20. // 百度地图API功能
  21. var map = new BMap.Map("container");
  22. var point = new BMap.Point(x,y);
  23. map.centerAndZoom(point,12);
  24. var geolocation = new BMap.Geolocation();
  25. geolocation.getCurrentPosition(function(r){
  26. if(this.getStatus() == BMAP_STATUS_SUCCESS){
  27. var mk = new BMap.Marker(r.point);
  28. map.addOverlay(mk);
  29. map.panTo(r.point);
  30. }
  31. else {
  32. alert('failed'+this.getStatus());
  33. }
  34. },{enableHighAccuracy: true})
  35. return;
  36. }
  37. alert("你的浏览器不支持获取地理位置！");
  38. };
  39. function showPosition(position){
  40. x=position.coords.latitude;
  41. y=position.coords.longitude;
  42. }
  43. </script>

看看运行效果：

HTML5调用百度地图API进行地理定位实例的更多相关文章

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

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

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

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

  3. Geocoding java调用百度地图API v2.0 图文 实例（ 解决102错误）

    如何使用? 第一步:申请ak(即获取密钥),若无百度账号则首先需要注册百度账号. 第二步,拼写发送http请求的url,注意需使用第一步申请的ak. 第三步,接收http请求返回的数据(支持json和 ...

  4. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  5. HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地

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

  6. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

  7. 如何利用【百度地图API】进行定位？非GPS定位

    原文:如何利用[百度地图API]进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! ------------------------------- ...

  8. 调用百度地图API的总结

    因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...

  9. 【c#】Form调用百度地图api攻略及常见问题

    首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...

随机推荐

  1. Java IO、网络编程、NIO、Netty、Hessian、RPC、RMI的学习路线

    好久没看Java IO这块的内容,感觉都快忘得差不多了.平成编程也没有设计到太多的Java基础知识,所以这里希望可以抽点时间回顾一下,让艾宾浩斯记忆曲线不要下降的太快. 回顾这个主要还是以总结为主,能 ...

  2. 《转》PyQt4 精彩实例分析* 实例2 标准对话框的使用

    和大多数操作系统一样,Windows及Linux都提供了一系列的标准对话框,如文件选择,字体选择,颜色选择等,这些标准对话框为应用程序提供了一致的观感.Qt对这些标准对话框都定义了相关的类.这些类让使 ...

  3. Codeforces Round #FF (Div. 2) A. DZY Loves Hash

    DZY has a hash table with p buckets, numbered from 0 to p - 1. He wants to insert n numbers, in the ...

  4. SpringMVC拦截器实现用户登录拦截

    本例实现登陆时的验证拦截,采用SpringMVC拦截器来实现 当用户点击到网站主页时要进行拦截,用户登录了才能进入网站主页,否则进入登陆页面 核心代码 首先是index.jsp,显示链接 1 < ...

  5. WCF基础之数据协定

    数据协定最重要的当然就是DataContract和DataMember.这两个特性能应用到类.结构和枚举.这个两个特性跟服务契约的特点是一样的,只有被DataContract标记的类和类中被标记Dat ...

  6. tomcat 编码问题

    默认情况下,tomcat使用的的编码方式:iso8859-1 修改tomcat下的conf/server.xml文件 找到如下代码:    < Connector port="8080 ...

  7. L2 范数 L1 范数 出租车范数

    https://en.wikipedia.org/wiki/Norm_(mathematics) http://cs231n.github.io/classification/

  8. world embedding 嵌入

    http://papers.nips.cc/paper/5477-neural-word-embedding-as-implicit-matrix-factorization 嵌入  |  Tenso ...

  9. Webpack探索【1】--- 基础知识

    本文主要说明Webpack的一些基础内容.

  10. sqlalchemy——基本操作

    以下所有代码片段都使用了统一的引用,该引用如下: from sqlalchemy import create_engine, ForeignKey from sqlalchemy.ext.declar ...