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 软键盘监听显示和隐藏
githup中找到:https://github.com/yescpu/KeyboardChangeListener import android.app.Activity; import andro ...
- 8168开发之---1g内存换成512M的内存映射配置
最近在帮新来同事调式内存分配,起初是将config.bld 中的内存在标配的基础上减少sr1,和tiler 将dsp从9m增加到16m,然后编译通过, 可是在加载的时候卡住了,init.sh 过,lo ...
- 多媒体开发之---开源库ffmeg的log之子解析
用了ffmeg快两年了,对其中的log甚是感兴趣,今天在做8148项目是,解读h264结构,看了<毕-新一代视频压缩编码标准h246> ,在第六章中的重排序里面看到了好熟悉的4x4矩阵zi ...
- maven安装jar包到本地仓库
mvn install:install-file -Dfile=D:/asm-1.5.3.jar -DgroupId=asm -DartifactId=asm -Dversion=1.5.3 -Dp ...
- 如何使CSS--better（系列一）
我们想一下以下问题: 1.什么样子的css代码才是高效的? 2.什么样子的css代码才是便于维护的? 3.什么样子的css才是可扩展的? 带着以下问题咱们简单的说一下css的“性能”问题 虽然我技术不 ...
- ASP.NET中指定自定义HTTP响应标头
新建一个类HideServerHeaderHelper,继承 IHttpModule,然后重写 OnPreSendRequestHeaders,Dispose,Init方法,如下代码所示 using ...
- [原创]将本地代码共享到github的操作步骤
将本地代码共享到github的操作步骤 本地代码目录执行如下命令,初始化为git仓库. git init 到github上新建一个仓库,假设为https://github.com/sky0014/sk ...
- http => https 升级
准备证书 阿里云安全(云盾)-> CA证书服务,购买证书,个人测试的话可以使用免费的,期限1年. 购买证书后,把域名与证书进行绑定,提交审核,大概10分钟左右,正常情况下审核就可以通过.证书准备 ...
- 【python】-- 文件操作
一.概述 我们工作中需要经常操作文件,下面就讲讲如何用Python操作文件 1.文件操作的流程: 打开文件,得到文件句柄赋值给一个变量 通过文件句柄,对文件进行操作 关闭文件 #获取文件句柄 f = ...
- Python中pymysql模块详解
安装 pip install pymysql 使用操作 执行SQL #!/usr/bin/env pytho # -*- coding:utf-8 -*- import pymysql # 创建连接 ...