文档章节

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

Delete90
 Delete90
发布于 07/12 17:54
字数 401
阅读 3
收藏 0
点赞 0
评论 0

测试有个bug,pc端没有app端精确

 

<!DOCTYPE html>  
<html>  
<title>HTML5调用百度地图API进行地理定位实例</title>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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=116.404269,y=39.916706;   
    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>  

 

 

简单版:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地理定位</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
     
</head>
<body>
<script>
    //获取当前地理信息
    window.navigator.geolocation.getCurrentPosition(success,error);
   //获取地理信息成功时的回调函数
    function success(position) {
        alert("成功获取您的地理信息");
        //获取经度维度信息
        //coords属性
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        //打印纬度,经度信息
       alert(latitude);
       alert(longitude)
    }
    //获取地理信息失败时的回调函数
    function error(msg) {
        alert("获取您的地理信息失败");
    }
</script>
</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
Delete90
粉丝 2
博文 38
码字总数 13072
作品 0
程序员
HTML5编程之旅 第1站 Geolocation

HTML5 Geolocation 初探 让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息。使用HTML5 Geolocation API(地理定位API),可以请求用户共享他们的...

倪伟伟
2014/02/24
0
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
0
0
html5如何利用百度地图快速的定位经纬度

定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则...

燚轩科技
05/14
0
0
php利用百度地图API进行IP定位和GPS定位

最近在做一个手机端的webapp地图应用,而核心内容当然是定位了,但是定位的话有几种方式,IP定位,GPS定位,基站定位(这个貌似webapp用不了), 那么剩下核心的gps定位和ip定位了,我们知道,...

xialeistudio
2015/01/12
0
3
HTML5 Geolocation API和Google Maps API结合实现路线导航

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来...

iNiL0119
2016/09/14
103
0
用html5实现一个高性能GIS地图可视化

以瓦片形式的栅格图像格式(PNG或JPEG图像)绘制地图的传统方法通常是今天在网络上传递地理空间数据的方式。这是通过在服务器上生产瓦片图像,并将它们提供给地图客户端。这种技术已被许多W...

wuwulh
2012/11/09
0
0
HTML5 Geolocation(地理定位)

HTML5 Geolocation(地理定位)用于定位用户的位置。 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可...

wybo521
2016/01/06
14
0
[应用模板]PhonegapGPS+百度地图

这是一个基于phonegapgps api+百度地图api的简单示例,首页是默认北京天安门附近的地图,点击现在切换到手机当前位置地图。虽然只有两个简单的页面,但关键的两个功能都是实现了(gps调用和地...

神话额
2014/01/07
0
0
WebView!!!!日记~~

● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍 三种解...

Neo_
2012/11/01
0
0
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

arts-week1

Algorithm 594. Longest Harmonious Subsequence - LeetCode 274. H-Index - LeetCode 219. Contains Duplicate II - LeetCode 217. Contains Duplicate - LeetCode 438. Find All Anagrams ......

yysue
14分钟前
0
0
NNS拍卖合约

前言 关于NNS的介绍,这里就不多做描述,相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas,关于sgas介绍可以戳htt...

红烧飞鱼
47分钟前
0
0
Java IO类库之管道流PipeInputStream与PipeOutputStream

一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式,在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...

老韭菜
今天
0
0
用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
今天
0
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
今天
1
0
protobuf学习笔记

相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门

OSC_fly
昨天
0
0
Mybaties入门介绍

Mybaties和Hibernate是我们在Java开发中应用的比较多的两个ORM框架。当然,目前Mybaties正在慢慢取代Hibernate,这是因为相比较Hibernate而言Mybaties性能更好,响应更快,更加灵活。我们在开...

王子城
昨天
2
0
编程学习笔记之python深入之装饰器案例及说明文档[图]

编程学习笔记之python深入之装饰器案例及说明文档[图] 装饰器即在不对一个函数体进行任何修改,以及不改变整体的原本意思的情况下,增加函数功能的新函数,因为这个新函数对旧函数进行了装饰...

原创小博客
昨天
1
0
流利阅读笔记33-20180722待学习

黑暗中的生物:利用奇技淫巧快活生存 Daniel 2018-07-22 1.今日导读 如果让你在伸手不见五指的黑暗当中生存,你能熬过几天呢?而大千世界,无奇不有。在很多你不知道的角落,有些生物在完全黑...

aibinxiao
昨天
6
0
Hystrix降级逻辑中如何获取触发的异常

通过之前Spring Cloud系列教程中的《Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)》一文,我们已经知道如何通过Hystrix来保护自己的服务不被外部依赖方拖垮的情况。但是实际...

程序猿DD
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部