1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
  7.         <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
  8.         <title>HTML5 Geolocation和百度地图API结合使用</title>
  9.         <!--引用百度地图API-->
  10.         <style type="text/css">
  11.             html,body {margin: 0;padding: 0;}
  12.             .iw_poi_title {color: #CC5522;font-size: 14px;font-weight: bold;overflow: hidden;padding-right: 13px;white-space: nowrap}
  13.             .iw_poi_content {font: 12px arial, sans-serif;overflow: visible;padding-top: 4px;white-space: -moz-pre-wrap;word-wrap: break-word;}
  14.         </style>
  15.         <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
  16.     </head>
  17.  
  18.     <body>
  19.  
  20.         <p id="demo">点击这个按钮，获得您的位置：</p>
  21.         <button onclick="getLocation()">试一下</button>
  22.         <div id="mapholder"></div>
  23.  
  24.         <!--百度地图容器-->
  25.         <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
  26.  
  27.     </body>
  28.     <script type="text/javascript">
  29.         /*
  30.          * 获取位置信息
  31.          */
  32.         function getLocation() {
  33.             if (!!navigator.geolocation) {//进行浏览器是否支持HTML5的定位
  34.                 /*
  35.                  * navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions])方法接受三个参数，
  36.                  * 其中第一个参数为必填。
  37.                  *         successCallback 获取定位成功时执行的回调函数
  38.                  *         errorCallback 定位失败时执行的回调函数
  39.                  *         positionOptions 用来设置positionOptions来更精细的执行定位
  40.                  *         详细参数说明  ：http://www.cnblogs.com/lecaf/archive/2011/08/01/2123593.html
  41.                  */
  42.                 navigator.geolocation.getCurrentPosition(showPosition, showError);
  43.  
  44.                 //实时获取位置信息
  45.                 setInterval(function(){
  46.                     //持续更新位置信息 ：navigator.geolocation.watchPosition(successCallback, [errorCallback] , [positionOptions]) - 参数和getCurrentPosition一致。
  47.                     var watchId = navigator.geolocation.watchPosition(updateLocation, handleeLocationError);
  48.                     //停止更新 ：停止 watchPosition() 方法
  49.                     //navigator.geolocation.clearWatch(watchId);
  50.                 },5000);
  51.             } else {
  52.                 document.getElementById("mapholder").innerHTML = "Geolocation is not supported by this browser.";
  53.             }
  54.         }
  55.         /*
  56.          * 地理位置获取成功
  57.          * 在百度地图上显示位置
  58.          */
  59.         function showPosition(position) {
  60.             var lat = position.coords.latitude;
  61.             var lon = position.coords.longitude;
  62.             var acc = position.coords.accuracy;
  63.             document.getElementById("demo").innerHTML = "维度:" + lat + ",经度:" + lon + ",精度:" + acc;
  64.             map.clearOverlays();
  65.             var new_point = new BMap.Point(lon, lat);
  66.             var marker = new BMap.Marker(new_point); // 创建标注
  67.             map.addOverlay(marker); // 将标注添加到地图中
  68.             map.panTo(new_point);
  69.         }
  70.         /*
  71.          * 地理位置信息获取失败
  72.          */
  73.         function showError(error) {
  74.             switch (error.code) {
  75.                 case error.PERMISSION_DENIED:
  76.                     x.innerHTML = "User denied the request for Geolocation."
  77.                     break;
  78.                 case error.POSITION_UNAVAILABLE:
  79.                     x.innerHTML = "Location information is unavailable."
  80.                     break;
  81.                 case error.TIMEOUT:
  82.                     x.innerHTML = "The request to get user location timed out."
  83.                     break;
  84.                 case error.UNKNOWN_ERROR:
  85.                     x.innerHTML = "An unknown error occurred."
  86.                     break;
  87.             }
  88.         }
  89.         //*********************************************************************************
  90.         //#region 百度地图API
  91.         /*
  92.          * API : http://developer.baidu.com/map/
  93.          * 创建百度地图 : http://api.map.baidu.com/lbsapi/createmap/index.html
  94.          */
  95.         //创建和初始化地图函数：
  96.         function initMap() {
  97.             createMap(); //创建地图
  98.             setMapEvent(); //设置地图事件
  99.             addMapControl(); //向地图添加控件
  100.             addMarker(); //向地图中添加marker
  101.         }
  102.         //创建地图函数：
  103.         function createMap() {
  104.             var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
  105.             var point = new BMap.Point(116.667343, 39.886004); //定义一个中心点坐标
  106.             map.centerAndZoom(point, 19); //设定地图的中心点和坐标并将地图显示在地图容器中
  107.             window.map = map; //将map变量存储在全局
  108.         }
  109.         //地图事件设置函数：
  110.         function setMapEvent() {
  111.             map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
  112.             map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
  113.             map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
  114.             map.enableKeyboard(); //启用键盘上下左右键移动地图
  115.         }
  116.         //地图控件添加函数：
  117.         function addMapControl() {
  118.             //向地图中添加缩放控件
  119.             var ctrl_nav = new BMap.NavigationControl({
  120.                 anchor: BMAP_ANCHOR_TOP_LEFT,
  121.                 type: BMAP_NAVIGATION_CONTROL_LARGE
  122.             });
  123.             map.addControl(ctrl_nav);
  124.             //向地图中添加缩略图控件
  125.             var ctrl_ove = new BMap.OverviewMapControl({
  126.                 anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
  127.                 isOpen: 1
  128.             });
  129.             map.addControl(ctrl_ove);
  130.             //向地图中添加比例尺控件
  131.             var ctrl_sca = new BMap.ScaleControl({
  132.                 anchor: BMAP_ANCHOR_BOTTOM_LEFT
  133.             });
  134.             map.addControl(ctrl_sca);
  135.         }
  136.         //标注点数组
  137.         var markerArr = [{
  138.             title: "家",
  139.             content: "我的备注",
  140.             point: "116.666988|39.886308",
  141.             isOpen: 0,
  142.             icon: {
  143.                 w: 21,
  144.                 h: 21,
  145.                 l: 46,
  146.                 t: 46,
  147.                 x: 1,
  148.                 lb: 10
  149.             }
  150.         }];
  151.          //创建marker
  152.         function addMarker() {
  153.             for (var i = 0; i < markerArr.length; i++) {
  154.                 var json = markerArr[i];
  155.                 var p0 = json.point.split("|")[0];
  156.                 var p1 = json.point.split("|")[1];
  157.                 var point = new BMap.Point(p0, p1);
  158.                 var iconImg = createIcon(json.icon);
  159.                 var marker = new BMap.Marker(point, {
  160.                     icon: iconImg
  161.                 });
  162.                 var iw = createInfoWindow(i);
  163.                 var label = new BMap.Label(json.title, {
  164.                     "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)
  165.                 });
  166.                 marker.setLabel(label);
  167.                 map.addOverlay(marker);
  168.                 label.setStyle({
  169.                     borderColor: "#808080",
  170.                     color: "#333",
  171.                     cursor: "pointer"
  172.                 });
  173.                 (function() {
  174.                     var index = i;
  175.                     var _iw = createInfoWindow(i);
  176.                     var _marker = marker;
  177.                     _marker.addEventListener("click", function() {
  178.                         this.openInfoWindow(_iw);
  179.                     });
  180.                     _iw.addEventListener("open", function() {
  181.                         _marker.getLabel().hide();
  182.                     })
  183.                     _iw.addEventListener("close", function() {
  184.                         _marker.getLabel().show();
  185.                     })
  186.                     label.addEventListener("click", function() {
  187.                         _marker.openInfoWindow(_iw);
  188.                     })
  189.                     if (!!json.isOpen) {
  190.                         label.hide();
  191.                         _marker.openInfoWindow(_iw);
  192.                     }
  193.                 })()
  194.             }
  195.         }
  196.         //创建InfoWindow
  197.         function createInfoWindow(i) {
  198.             var json = markerArr[i];
  199.             var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
  200.             return iw;
  201.         }
  202.         //创建一个Icon
  203.         function createIcon(json) {
  204.             var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), {
  205.                 imageOffset: new BMap.Size(-json.l, -json.t),
  206.                 infoWindowOffset: new BMap.Size(json.lb + 5, 1),
  207.                 offset: new BMap.Size(json.x, json.h)
  208.             })
  209.             return icon;
  210.         }
  211.         initMap(); //创建和初始化地图
  212.         //#endregion 百度地图API
  213.     </script>
  214.  
  215. </html>

HTML5-Geolocation&地图.html的更多相关文章

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

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

  2. html5 Geolocation(地理位置定位)学习

    1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供 ...

  3. HTML5 Geolocation API地理定位整理（二）

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  4. HTML5 Geolocation用来定位用户的位置。

    HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...

  5. HTML5 Geolocation位置信息定位总结

    现在定位功能很常用,所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据.HTML5 Geolocation的定位用法很简单,首先请求位置信息,用户同意,则返回位置信息.HTML5 Geoloc ...

  6. [Javascript] HTML5 地理位置定位（HTML5 Geolocation）原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  7. 用HTML5 Geolocation实现一个距离追踪器

    HTML5 Geolocation(地理定位)用于定位用户的位置.那么如何实现一个距离追踪器呢?我的思路是这样的,前提是浏览器支持h5地理定位,在这个基础上,获取用户位置,更新用户位置,计算距离,显示 ...

  8. HTML5: HTML5 Geolocation（地理定位）

    ylbtech-HTML5: HTML5 Geolocation(地理定位) 1.返回顶部 1. HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位 ...

  9. HTML5 地理位置定位（HTML5 Geolocation）原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  10. 基于HTML5 geolocation 实现的天气预报功能

    最近一直在学习HTML5,因为8月份要开发手机项目了.所以先把HTML5学习下. 基本思路: 1. 用户未设置任何城市之前,根据HTML5 geolocation 获取用户所在的地理位置. 2. 根据 ...

随机推荐

  1. NoSQL数据库的分布式算法&&memcache集群的实现

    NoSQL数据库的分布式算法  http://blog.nosqlfan.com/html/4139.html 一致性hash算法在memcache集群中的应用   http://alunblog.d ...

  2. windows10上安装 .NET Framework 3.5

    在安装一些软件时,需要 .NET Framework3.5.按照windows给的提示下载不了.在官方网站上给了解决方案: 运行 DISM 工具 从屏幕右边缘向中间轻扫,然后点击“搜索”.(如果使用的 ...

  3. storm0.9.0.1安装

    storm 0.9.x的好处是引入了netty进行网络传输(需要配置),不用再依赖zeromq和jzmq了 1.下载安装zookeeper ... 2.下载安装storm依赖库 JDK1.6及以上 . ...

  4. 琐碎-关于Windows调试hadoop

    http://www.aboutyun.com/thread-7784-1-1.html 今天早上看了这个文章后我有点疑问,所以特地实践了一把. 之前也遇到了调试的时候 org.apache.hado ...

  5. 1.7.4.1 Function Queries-函数查询

    1 . Function Queries 函数查询使你可以使用一个或者多个数字字段的实际的值生成一个关联的得分(score),函数查询支持DixMax,eDisMax,标准的查询解析. 函数查询使用函 ...

  6. ios -几种常见定时器

    转自cocoachina 网友分享: http://mp.weixin.qq.com/s?__biz=MjM5OTM0MzIwMQ==&mid=206637839&idx=7& ...

  7. Android开发 SDK NDK下载

    2014.7版本 ADT Bundle http://dl.google.com/android/adt/adt-bundle-windows-x86-20140702.ziphttp://dl.go ...

  8. Hosts文件是什么？

    Hosts文件主要作用是定义IP地址和主机名的映射关系,是一个映射IP地址和主机名的规定.可以用文本文件打开!当用户在浏览器中输入一个需要登录的 网址时,系统会首先自动从Hosts文件中寻找对应的IP ...

  9. LearnMVC5-AddAModel

    本人是MVC新手,将从微软官网学习MVC并将看过的英文文档翻译成中文,由于本人英文水平不好,有翻译不准确.错误的地方万望指出,我看到后将会在第一时间修改.另外也希望这一系列文章能为后来者起到引导作用. ...

  10. C# struct

    很困惑,为什么C#会有struct 这样一个关键字.虽然我用C#几年了,但绝少用到此关键字.我在相关书籍上学习C#的时候,看到过struct内容——但C#并不是我的第一入门语言,所以没有那么细致的学习 ...