欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5如何调用百度地图API进行地理定位详情

程序员文章站 2022-03-21 08:34:58
自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTM...

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

  1. >    
  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="https://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb">script>    
  7.     head>    
  8.     <body style="margin:50px 10px;">    
  9.         <p id="status" style="text-align: center">p>    
  10.         <p style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container">p>    
  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>