自从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. Apatar 学习文档

    1.   Apatar数据集成简介 Apatar是一个开源跨平台数据集成工具,可以安装和运行在任何机器这有一些类型的用户界面.该工具用于启用批处理数据集成和提供简单的用户界面,这样任何人,不仅仅是技术 ...

  2. 精准 iOS 内存泄露检测工具

    MLeaksFinder:精准 iOS 内存泄露检测工具 发表于 2016-02-22   |   zepo   |   23 Comments 背景 平常我们都会用 Instrument 的 Lea ...

  3. <Netty>（入门篇）TIP黏包/拆包问题原因及换行的初步解决之道

    熟悉TCP编程的读者可能都知道,无论是服务端还是客户端,当我们读取或者发送消息的时候,都需要考虑TCP底层的粘包/拆包机制.木章开始我们先简单介绍TCP粘包/拆包的基础知识,然后模拟一个没有考虑TCP ...

  4. Laravel核心之IOC和Facade 架构分析1

    控制反转(Inversion of Control) 缩写为IoC 最常见的方式叫做依赖注入 简单说来,就是一个类把自己的的控制权交给另外一个对象,类间的依赖由这个对象去解决. Laravel 中的使 ...

  5. C# 代码 手工 配置 Log4Net 2种方法

    这个初始化要在 获取 ILog 接口的代码之前完成, 之后按通常方式使用 log4net 就行了. 不用携带 config 配置文件. 方法1: /// <summary> /// 使用文 ...

  6. python 基础 9.12 索引

    #/usr/bin/python #-*- coding:utf-8 -*- #@Time   :2017/11/24 4:48 #@Auther :liuzhenchuan #@File   :索引 ...

  7. pthon 基础 9.8 增加数据

    #/usr/bin/python #-*- coding:utf-8 -*- #@Time   :2017/11/24 2:59 #@Auther :liuzhenchuan #@File   :增加 ...

  8. EventLoop（netty源码死磕4）

    精进篇:netty源码  死磕4-EventLoop的鬼斧神工 目录 1. EventLoop的鬼斧神工 2. 初识 EventLoop 3. Reactor模式回顾 3.1. Reactor模式的组 ...

  9. Django多对多的创建

    1.多对多创建的应用场景: 在某表中创建一行数据是,有一个可以多选的下拉框 例如:创建用户信息,需要为用户指定多个爱好 2.创建方式: 方式一:自定义关系表,手动创建一张表用于关联其他多张表的关系 c ...

  10. JQuery日记 5.11 Sizzle选择器(五)

    //设置当前document和document相应的变量和方法 setDocument = Sizzle.setDocument = function( node ) { var hasCompare ...