HTML5调用百度地图API进行地理定位实例
自从HTML5的标准确定以后，越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多，但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例。请看下面代码：
- <!DOCTYPE html>
- <html>
- <title>HTML5调用百度地图API进行地理定位实例</title>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>
- </head>
- <body style="margin:50px 10px;">
- <div id="status" style="text-align: center"></div>
- <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
- </body>
- </html>
- <script type="text/javascript">
- //默认地理位置设置为上海市浦东新区
- var x=121.48789949,y=31.24916171;
- window.onload = function() {
- if(navigator.geolocation) {
- navigator.geolocation.getCurrentPosition(showPosition);
- document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
- // 百度地图API功能
- var map = new BMap.Map("container");
- var point = new BMap.Point(x,y);
- map.centerAndZoom(point,12);
- var geolocation = new BMap.Geolocation();
- geolocation.getCurrentPosition(function(r){
- if(this.getStatus() == BMAP_STATUS_SUCCESS){
- var mk = new BMap.Marker(r.point);
- map.addOverlay(mk);
- map.panTo(r.point);
- }
- else {
- alert('failed'+this.getStatus());
- }
- },{enableHighAccuracy: true})
- return;
- }
- alert("你的浏览器不支持获取地理位置！");
- };
- function showPosition(position){
- x=position.coords.latitude;
- y=position.coords.longitude;
- }
- </script>
看看运行效果：
HTML5调用百度地图API进行地理定位实例的更多相关文章
- HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...
- HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
- Geocoding java调用百度地图API v2.0 图文 实例（ 解决102错误）
如何使用? 第一步:申请ak(即获取密钥),若无百度账号则首先需要注册百度账号. 第二步,拼写发送http请求的url,注意需使用第一步申请的ak. 第三步,接收http请求返回的数据(支持json和 ...
- 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...
- HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...
- 调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
- 如何利用【百度地图API】进行定位？非GPS定位
原文:如何利用[百度地图API]进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! ------------------------------- ...
- 调用百度地图API的总结
因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...
- 【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
随机推荐
- CentOS6.4下编译安装Apache2.4+PHP5.6
安装Apache2.4: 首先从 http://httpd.apache.org/download.cgi#apache24下载apache源码包httpd-2.4.4.tar.gz从 http: ...
- 请描述Java中的时间监听机制？
1.时间监听涉及到三个组件:事件源.事件对象.事件监听器 2.当事件源上发生某个动作时,它会调用事件监听器的一个方法,并将事件对象穿进去,开发人员在监听器中通过事件对象,拿到事件源,从而对事件源进行操 ...
- 【Python + Selenium】之unittest测试用例满足条件，进行跳过测试Skip
直接上代码: __author__ = 'zc' import unittest class demoSkipTest(unittest.TestCase): a = 70 b = 50 print( ...
- Lumen开发：添加手机验证，中文验证与Validator验证的“半个”生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 添加手机验证方法可直接看这里:https://www.cnblogs.com/cxscode/p/9609828.html 今天来讲一下,Lume ...
- Android创建library工程
本文着重介绍如何创建Android library,并且在工程中使用此library提供的资源,具体步骤如下:1. 创建一个Android工程,命名为sourceProj2. 右键--properti ...
- Android string.xml 显示特殊符号
项目中要在string.xml 中显示特殊符号,如@号冒号等,直接写肯定不行啦..只能考虑使用ASCII码进行显示: 省略号 …@号 @:号 :空格 以下为常见的ASCII十进制交换编码: --& ...
- Web前端开发规范【HTML/JavaScript/CSS】
前言 这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范,其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分.我们知道,当一个团队开始指定并实行编码规 ...
- （比赛）A - Simple String Problem
A - Simple String Problem Time Limit:10000MS Memory Limit:65536KB 64bit IO Format:%lld & ...
- Devexpress GridView 常用操作总结
一:Clone返回新的 DataTable Clone返回新的 DataTable,与当前的 DataTable 具有相同的架构:Copy:返回新的 DataTable,它具有与该 DataTable ...
- Python菜鸟之路：Python操作MySQL-即pymysql/SQLAlchemy用法
上节介绍了Python对于RabbitMQ的一些操作,本节介绍Python对于MySQL的一些操作用法 模块1:pymysql(等同于MySQLdb) 说明:pymysql与MySQLdb模块的使用基 ...