利用百度地图API,在浏览器中找到自己的位置
首先你得有个百度地图的秘钥,http://lbsyun.baidu.com/apiconsole/key
剩下的就是编码了
这里面会用到一个javascript里的一个函数，getMyLocation()，利用它我们就可以获得自己的经度纬度，然后再经过百度地图，将其显示出来。
上代码，首先是html文件中的代码，使用html5标准
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WkiwWUQooPfVD2lgLGV8sv3x"></script>
<title>获取我的位置</title>
<script type="text/javascript" src="text.js">
</script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
然后js中的代码
function map(position)
{
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
alert(position.coords.longitude);
alert(position.coords.latitude);
map.centerAndZoom(new BMap.Point(position.coords.longitude, position.coords.latitude), 15); // 初始化地图,设置中心点坐标和地图级别 数字越大 放大倍数越大
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("我的位置"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
}
window.onload=getMyLocation; //没有了这句话 页面上讲不会显示出地图 function getMyLocation()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(map);
}
else
{
alert("很抱歉，获取您的地址信息失败");
}
}
在程序运行时，浏览器会提示是否运行获取你的地址信息，这里选择运行。
需要注意的一点是window.onload=getMyLocation; //没有了这句话 页面上讲不会显示出地图
这句话是指在完成了html的加载后再执行这个函数，且这里好像是要指向getMyLocation，而不能指向map函数，具体为什么我还不清楚，或者我还没学到那里，不过我的理解是，map函数的运行依赖于getMyLocation，而反之则不然，所以这里指向getMyLocation函数。
运行截图：
利用百度地图API,在浏览器中找到自己的位置的更多相关文章
- 利用百度地图API和群蚁算法，对TSP问题进行模拟与求解
前言 最近由于换了工作,期间也有反思和总结上家公司的得失,总觉得有什么事情当初可以完成或者完成得更好,其中TSP问题就是其中之一.当初在开发一个仓配系统的时候,有一个线路排程的需求,当时自己简单在纸上 ...
- 利用百度地图API，获取经纬度坐标
利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...
- 百度地图api在Html中显示，在jsp页面中不显示解决方法
在jsp页面中显示如下 但是在html中正常显示. 原来的代码如下: <script type="text/javascript" src="http://api. ...
- 百度地图API在vue-cli中路径错误的问题
在使用百度地图的时候,需要使用自定义的icon图片,百度的案例中使用的是线上地址,但当替换为本地图片路径的时候,错误出现了 这是本地图片地址 ) // 设置覆盖物大小 ); 这里有一点需要注意,这里路 ...
- 利用百度地图api实现定位
使用百度地图api前需要先获取一个百度地图开放平台的访问应用AK, 获取百度地图开放平台访问应用AK方式:注册百度账号-->申请百度开发者-->获取密匙-->使用相关功能. 注册账号 ...
- 百度地图API调用实例之地址标注与位置显示
之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...
- 百度地图API应用之获取用户的具体位置
功能的大概:用户通过点击地图上面的位置,在地图上面进行描点,然后再把获取的到的地理位置保存到地图上面的地址栏目中. 主要是百度地图API的使用 .代码如下: var map = new BMap.Ma ...
- 利用百度地图API制作房产酒店地图
摘要: 想亲手制作一张酷讯.去哪儿.安居客.链接地产那样的房产.酒店地图麼?那赶快来学习吧.(以酷讯为例,如下图) 更多成功案例请点击:http://dev.baidu.com/wiki/map/in ...
- Python3爬虫 利用百度地图api得到城市经纬度
有2种方式,第一种是利用urllib , 方法1:利用urllib , 先把url 转成urlcode,然后读取网页,读到网页再用json读取内容,比较麻烦. 可以在浏览器输入,看一下格式. http ...
随机推荐
- css动画——transition和animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...
- 关于ER图和UML图之间的对比
ER图与UML图 ER图:实体-联系图(Entity-Relation Diagram)用来建立数据模型,在数据库系统概论中属于概念设计阶段,ER图提供了表示实体(即数据对象).属性和联系的方法,用来 ...
- 修改BASH的配色
PS1变量简介 PS1是Linux终端用户的一个环境变量,用来说明命令行提示符的设置. \d :#代表日期,格式为weekday month date,例如:"Mon Aug 1" ...
- oracle中decode()函数
简单写写,后续继续补充
- Bootstrap--全局css样式之图片
好久没有更新博客了,在这里跟大家分享一下生活的小乐趣,作为程序员,整天对着电脑是很不爽的,加班也是常有的,所以连续工作对身体是很不爽的,而且随着年龄的增加,程序员身体状况会越来越差,还是建议大家要常去 ...
- 20160504-hibernate入门
关系型数据库与面向对象 模型不匹配(阻抗不匹配) Java面向对象语言,对象模型,其主要概念有:继承.关联.多态等:数据库是关系模型,其主要概念有:表.主键.外键等. 解决办法: 1使用JDBC手工转 ...
- Ajax的Get和Post的区别
Ajax的Get和Post的区别Get方式:用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照U ...
- SQL Server 错误检测与修复
简介 在一个理想的世界中,不会存在任何数据库的损坏,就像我们不会将一些严重意外情况列入我们生活中的日常一样,而一旦这类事情发生,一定会对我们的生活造成非常显著的影响,在SQL Server中也同样如此 ...
- ASP.NET Web API——选择Web API还是WCF
WCF是.NET平台服务开发的一站式框架,那么为什么还要有ASP.NET Web API呢?简单来说,ASP.NET Web API的设计和构建只考虑了一件事情,那就是HTTP,而WCF的设计主要是考 ...
- ###《Effective STL》--Chapter6
点击查看Evernote原文. #@author: gr #@date: 2014-09-27 #@email: forgerui@gmail.com Chapter6 函数子.函数子类.函数及其他 ...