在一些网站上,我们经常会看到一些地址会有一个图标的形式展现,当你点击的时候就会加载一个你点击区域的地图出来,很神奇的一个功能,在之前是没有这样功能的,都是直接写上地址,你要去的话自己找去吧,现在有了这个人性化的工具之后,我们要找什么地点就明确很多了,在上面可以看到周围的具体环境啊,什么的,交通啊什么的都可以查到,那么,思考一下,要实现这个功能好像十分的困难吧,居然把一个地图给精确定位,太不可思议了。

  十分方便的是,我们的html5就能够轻松的帮助我们搞定这个事情,下面我就介绍一下怎么实现地图的呈现。

  首先我们需要百度地图API的接口,第一步,在百度的搜索栏输入“百度地图API”当页面发生跳转的时候找到“申请密钥”按钮,点击之后在开发的位置会出现三个javascript 极速版,大众版,开源库,点击选择大众版,之后跳转页面之后,就是获得密钥了,紧接着在API控制台同意条件,然后就是一个繁琐的注册阶段,相信大家都会,这个这册的话是可以取得五个免费的API接口的,当注册完成之后就可以创建我们的应用了。紧接着就将我们的密钥复制粘贴到访问应用AK 那个地方,最后就是在浏览器中设置允许网站跟踪您的位置,这样我们的前期准备工作就做好了,剩下的就是页面上的事情了。

  我们需要在页面上有一个div来显示我们的地图展示,还需要js代码来执行,不过不用担心,百度已经帮我们写好了代码,我们只需要直接应用就可以了,

<p id="p1"></p>---------》用来存放一会儿我们获得当地的坐标点的数据;

<button onclick="getLocation()">click</button>  在这里我们准备了一个函数用来触发获取位置这个事件,

接下来就是我们的js代码:

<script type="text/javascript">
var p1=document.getElementById("p1")
function getLocation()
{

if (navigator.geolocation)
{
alert(1);---------------->主要是用在这里作为测试,这是为了直观显示所以用了alert方法,不过这个方法会阻止代码的加载,所以还是建议用cconsole.log控制台输出。
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}---------->如果浏览器不支持的话,弹出这句话提示用户。
}
function showPosition(position)
{
p1.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;-------------------------》在这里显示获取的经度和纬度。
}
</script>

function showPosition(position)
{
var la= position.coords.latitude
var lo =position.coords.longitude

var map = new BMap.Map("container"); ----------》创建Map实例
map.centerAndZoom(new BMap.Point(lo,la), 15); ——————》初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); -------------》添加平移缩放控件
map.addControl(new BMap.ScaleControl()); -------------》添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); ----------》滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); -------------->添加地图/添加缩略地图控件
map.enableScrollWheelZoom();-------------->启用类型控件
map.setCurrentCity("成都"); ----------------->设置地图显示的城市 此项是必须设置的
}

既然我们可以

利用电脑进行定位,那么同时也可以用手机做一个导航的效果,但是前提是必须具备精准的导航功能,

watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS);

clearWatch() - 停止 watchPosition() 用clear方法进行清除watchPosition()方法,

下面我们进行手机的导航

同样是给一个p标签存放我们一会儿得到的坐标的数据,

var x=document.getElementById("p1")
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude
}

主要的原理和我们上面讲到的百度地图API相似,我们的html5的功能确实很强大,但是并不是万能的,当然还是存在着一定的问题,所以在学习的时候进行有选择的吸收。

html5 的百度地图连接的更多相关文章

  1. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  2. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

  3. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

  4. HTML5结合百度地图API创建地图应用

    具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid ...

  5. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

  6. HTML5地理定位,百度地图API,知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  7. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  8. html5 geolocation配合百度地图api实现定位

    1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置.鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用时 ...

  9. 使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置

    最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...

随机推荐

  1. ios开发学习--歌词处理--解析lrc文件

    我觉得要想解析lrc 首先大家应该了解一下lrc文件的结构,大家可以去看一下**百科 我这里粗略的写一下: ■ 时间标签(Time-tag) 形式为"[mm:ss]"(分钟数:秒数 ...

  2. 转:我终于离开了年薪30w的IT行业

    题目乍看起来有点故意惹人眼球的味道,但是对于我事实就是如此,暂且请君听我细细道来!      先自曝家门,我03年毕业,05年来深,06年买车子,06年底结婚,07年买了房子,09年生了儿子,妻子.房 ...

  3. Qt Style Sheets Examples(官方例子目录,很全)

    Contents Style Sheet Usage Customizing the Foreground and Background Colors Customizing Using Dynami ...

  4. [Theano] Theano初探

    1. Theano用来干嘛的? Theano was written at the LISA lab to support rapid development of efficient machine ...

  5. HDU1050(Moving Tables:贪心算法)

    解题思路: 这种做法是基于hdu2037的做法上考虑的,找出所有可以同时搬运的桌子,然后就很方便求出最短总时间. 还有一种更简单的做法是直接遍历一遍找出与别的重复次数最多的那片区域,重复次数*10就可 ...

  6. 【Cocos2d-X开发学习笔记】第27期:游戏背景之贴图地图类(CCTileMapAtlas)的使用

    本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010 一.贴图地图类CCTileMapAtlas 除了 ...

  7. Hibernate二 映射 注解 一级缓存

    Hibernate映射1.@Entity 被该注解修饰的POJO类是一个实体,可以用name属性指定该实体类的名称,系统默认以该类的类名作为实体类的名称.2.@Table 指定持久化类所映射的表,它的 ...

  8. vue.js学习笔记(一):什么是mvvm框架,vue.js的核心思想

    一:MVVM框架 MVVM框架的应用场景:  1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验 二:vue.js的核心思想 (一):数据驱动 ( ...

  9. android中Canvas使用drawBitmap绘制图片

    1.主要的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置     drawBitmap(Bitmap bitmap, float left, float ...

  10. url编码解码-js编码、C#编码

    JS编码解码 函数一定义和用法encodeURI() 函数可把字符串作为 URI 进行编码. 语法 encodeURI(URIstring) 参数 描述 URIstring 必需.一个字符串,含有 U ...