zoukankan      html  css  js  c++  java

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

    自从HTML5的标准确定以后，越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多，但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例。请看下面代码：

    [html] view plain copy
     
    1. <!DOCTYPE html>    
    2. <html>    
    3. <title>HTML5调用百度地图API进行地理定位实例</title>    
    4.     <head>    
    5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    6.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>    
    7.     </head>    
    8.     <body style="margin:50px 10px;">    
    9.         <div id="status" style="text-align: center"></div>    
    10.         <div style="600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>    
    11.     </body>    
    12. </html>    
    13.     
    14. <script type="text/javascript">    
    15.     //默认地理位置设置为上海市浦东新区  
    16.     var x=121.48789949,y=31.24916171;     
    17.     window.onload = function() {    
    18.         if(navigator.geolocation) {    
    19.             navigator.geolocation.getCurrentPosition(showPosition);  
    20.             document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";    
    21.                 // 百度地图API功能    
    22.                 var map = new BMap.Map("container");    
    23.                 var point = new BMap.Point(x,y);    
    24.                 map.centerAndZoom(point,12);    
    25.     
    26.                 var geolocation = new BMap.Geolocation();    
    27.                 geolocation.getCurrentPosition(function(r){    
    28.                     if(this.getStatus() == BMAP_STATUS_SUCCESS){    
    29.                         var mk = new BMap.Marker(r.point);    
    30.                         map.addOverlay(mk);    
    31.                         map.panTo(r.point);    
    32.                     }    
    33.                     else {    
    34.                         alert('failed'+this.getStatus());    
    35.                     }            
    36.                 },{enableHighAccuracy: true})    
    37.             return;  
    38.         }    
    39.         alert("你的浏览器不支持获取地理位置！");  
    40.     };    
    41.     function showPosition(position){  
    42.       x=position.coords.latitude;   
    43.       y=position.coords.longitude;    
    44.     }  
    45. </script>    

    看看运行效果：
  • 相关阅读:
    LaTeX入门
    用jdom来解析xml文件小Demo
    Java乔晓松基于注解的面向AOP(切面)编程
    三层架构实战篇—系统登录实例
    selenium ide插件介绍
    WPF17行为（以控件在界面拖动为例）
    火狐浏览器显示“已阻止载入混合活动内容“的解决方法
    博客园—打赏功能
    网页返回顶部的几种方法
    自定义美化博客园
  • 原文地址：https://www.cnblogs.com/yyjie/p/7209476.html
Copyright © 2011-2022 走看看