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/ ...
随机推荐
- Android Studio 使用笔记：工具窗口浮动与布局恢复
Android Studio 的工具窗口都可以变成浮动窗口,如果有多个显示器的话,这种模式非常方便.方法如下: 然后就像下图那样,可以拖拽了.如果你不小心关了,没有关系.再次点击工具栏,浮动窗口就回显 ...
- centos 7 安装 mail
yum install -y sendmail 将下面内容粘贴到/etc/mail.rc中 set ssl-verify=ignore set nss-config-dir=/root/.certs ...
- publish over ssh 实现 Jenkins 远程部署
Jenkins远程部署,一开始没有任何头绪,想了很多方案. 因为两台机器都是windows系统,所以想到publish over cifs, 但是这个网上资料太少,貌似只能内网使用.又想到了Jenki ...
- Linux下tar解压缩命令
1.打包命令: 命令格式:tar -zcvf 压缩文件名.tar.gz 被压缩文件名 可先切换到当前目录下.压缩文件名和被压缩文件名都可加入路径. 2.解包命令: 命令格式:tar -zx ...
- Spring Cloud 微服务三： API网关Spring cloud gateway
前言:前面介绍了一款API网关组件zuul,不过发现spring cloud自己开发了一个新网关gateway,貌似要取代zuul,spring官网上也已经没有zuul的组件了(虽然在仓库中可以更新到 ...
- nodejs windows下安装运行
node 官网下载地址http://nodejs.org/ 下载自己对应的版本 ,我下的是windows版本 node-v4.1.1-x64.msi 然后 下一步 下一步 就完成安装了,非常简单, ...
- 电路分析二-------基尔霍夫定律KCL和KVL
1.先了解几个名词 (1)支路----一个二端原件视为一条支路--图中6个二端原件所以有6条支路. (2)结点----两条或以上的支路连接的点. d,e可以看做一个结点. (3).回路----- (4 ...
- Centos 6 安装 python2.7 和 pip
一.安装 python2.7 [root@crazy-acong ~]# cd /data/tools/ [root@crazy-acong tools]# yum groupinstall &quo ...
- spring struts2整合
把struts2的action交给spring管理 一.导入相应jar包 导入与spring有关的基本jar包,和与struts2有关的基本jar包 还需要导入 struts2-spring整合jar ...
- sublime 快捷键,左菜单乱码
sublime 快捷键安装 packagecontrol https://packagecontrol.io/installation#st3 import urllib.request,os,has ...