首先你得有个百度地图的秘钥,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,在浏览器中找到自己的位置的更多相关文章

  1. 利用百度地图API和群蚁算法，对TSP问题进行模拟与求解

    前言 最近由于换了工作,期间也有反思和总结上家公司的得失,总觉得有什么事情当初可以完成或者完成得更好,其中TSP问题就是其中之一.当初在开发一个仓配系统的时候,有一个线路排程的需求,当时自己简单在纸上 ...

  2. 利用百度地图API，获取经纬度坐标

    利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...

  3. 百度地图api在Html中显示，在jsp页面中不显示解决方法

    在jsp页面中显示如下 但是在html中正常显示. 原来的代码如下: <script type="text/javascript" src="http://api. ...

  4. 百度地图API在vue-cli中路径错误的问题

    在使用百度地图的时候,需要使用自定义的icon图片,百度的案例中使用的是线上地址,但当替换为本地图片路径的时候,错误出现了 这是本地图片地址 ) // 设置覆盖物大小 ); 这里有一点需要注意,这里路 ...

  5. 利用百度地图api实现定位

    使用百度地图api前需要先获取一个百度地图开放平台的访问应用AK, 获取百度地图开放平台访问应用AK方式:注册百度账号-->申请百度开发者-->获取密匙-->使用相关功能. 注册账号 ...

  6. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  7. 百度地图API应用之获取用户的具体位置

    功能的大概:用户通过点击地图上面的位置,在地图上面进行描点,然后再把获取的到的地理位置保存到地图上面的地址栏目中. 主要是百度地图API的使用 .代码如下: var map = new BMap.Ma ...

  8. 利用百度地图API制作房产酒店地图

    摘要: 想亲手制作一张酷讯.去哪儿.安居客.链接地产那样的房产.酒店地图麼?那赶快来学习吧.(以酷讯为例,如下图) 更多成功案例请点击:http://dev.baidu.com/wiki/map/in ...

  9. Python3爬虫 利用百度地图api得到城市经纬度

    有2种方式,第一种是利用urllib , 方法1:利用urllib , 先把url 转成urlcode,然后读取网页,读到网页再用json读取内容,比较麻烦. 可以在浏览器输入,看一下格式. http ...

随机推荐

  1. java基础学习总结二(标识符、字符集、数据类型以及类型转换)

    一:标识符 1:标识符可以由字母.数字.下划线_.$符等组成2:标识符的首字母只能是字母.数字.下划线3:标识符不能使用关键字或者保留字4:标识符可以是中文,但是不建议使用中文5:标识符可以任意长,没 ...

  2. 昨天冲动的搬到外面住了，oh yeah

    昨天我纠结了一天,我是否应该搬到外面去住.我骑着我的自行车,在外面闲逛,我心里想的是,我现在没有钱,可以节约一些生活费,租房的日子,我以后始终都是需要面对的,在目前没有那么多钱的情况下,可以不出去外面 ...

  3. .Net 把网页Html转PDF文件

    .Net 把网页Html转PDF文件 此篇主要利用 wkhtmltopdf  进行转换. 一.控制台直接转换 首先到官网http://wkhtmltopdf.org/下载wkhtmltopdf  ,下 ...

  4. 如何提高jQuery的性能

    缓存变量DOM遍历是昂贵的,所以尽量将会重用的元素缓存. // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // ...

  5. 默认安装wamp修改MySQL密码

    首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车. 然后输入“use mysql”,意思是使用mysql这个数据库,提示“Database changed”就行. ...

  6. hyperlink

    在list中create column时,注意HyperlinkOrPicture这一选项,如果某一列为HyperLinkOrPicture,那么在后台就不要再加<a></a> ...

  7. ASP.NET伪静态-无法读取配置文件，因为它超过了最大文件大小的解决办法

    一直都在使用微软URLRewriter,具体的使用方法我就不多说了,网上文章很多. 但最近遇到一个问题,就是当web.config文件里面设置伪静态规则过多,大于2M的时候,就报错:无法读取配置文件, ...

  8. 转--T-SQL 总结

    把长日期转换为短日期   Convert(char(10),getdate(),120)  MS-SQL数据库开发常用汇总 1.按姓氏笔画排序:Select * From TableName Orde ...

  9. vs2010开发android的准备工作

    安装 Mono for Android for Visual Studio 2010 需要下面4个步骤: 安装 JDK 安装 Android SDK 配置模拟器 安装 Mono for Android ...

  10. C# 并行开发总结

    本文内容 均参考自 <C#并行高级编程> TPL 支持 数据并行(有大量数据要处理,必须对每个数据执行同样的操作, 任务并行(有好多可以并发运行的操作),流水线(任务并行和数据并行的结合体 ...