文档章节

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

Delete90
 Delete90
发布于 07/12 17:54
字数 401
阅读 15
收藏 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
博文 46
码字总数 32068
作品 0
程序员
私信 提问
HTML5编程之旅 第1站 Geolocation

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

倪伟伟
2014/02/24
0
0
html5如何利用百度地图快速的定位经纬度

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

燚轩科技
05/14
0
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

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

Drealin
2012/09/07
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

没有更多内容

加载失败,请刷新页面

加载更多

springboot中filter的用法

一、在spring的应用中我们存在两种过滤的用法,一种是拦截器、另外一种当然是过滤器。我们这里介绍过滤器在springboot的用法,在springmvc中的用法基本上一样,只是配置上面有点区别。 二、f...

xiaomin0322
6分钟前
1
0
java项目修改了更换了jdk版本报错进行修改

java项目原来用的是1.8版本的,改成1.7版本后,项目会报错,要进行的修改是 然后是clean一下项目,然后是选中项目的buildpath,然后是configurebuildpath,然后是看jdk是否进行修改...

myAll_myAll
18分钟前
3
0
Gartner 2018 数据库系列报告发布 巨杉数据库连续两年入选

近期,Gartner陆续发布了2018年的数据库系列报告,包括《数据库魔力象限》《数据库核心能力》以及《数据库推荐报告》。其中,SequoiaDB巨杉数据库作为业界领先的金融级分布式交易型数据库产品...

巨杉数据库
20分钟前
0
0
Navicat闲置一段时间卡死问题的解决

先关闭连接,再右键点击所需要设置的链接,进入编辑连接,进入高级项,勾选保持连续间隔(秒):时间设置短一些,比如30秒,完成!!

joyStalker
20分钟前
0
0
理解Java中的弱引用(Weak Reference)

1. What——什么是弱引用? Java中的弱引用具体指的是java.lang.ref.WeakReference<T>类,我们首先来看一下官方文档对它做的说明: 弱引用对象的存在不会阻止它所指向的对象变被垃圾回收器回...

绝地逢生
21分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部