js地理定位

   <!DOCTYPE html>
   <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta charset="utf-8" />
   <title>H5地理位置Demo</title>
   <script src="http://api.map.baidu.com/api?v=1.3"        type="text/javascript"></script>
   <script type="text/javascript" src="convertor.js"></script>
   </head>
   <body>
   <div id="map" style="width:600px; height:400px"></div>
   </body>
   <script type="text/javascript">
   if (window.navigator.geolocation) {
   var options = {
   enableHighAccuracy: true,
   };
   window.navigator.geolocation.getCurrentPosition(handleSuccess,        handleError, options);
   } else {
   alert("浏览器不支持html5来获取地理位置信息");
   }

   function handleSuccess(position){
   // 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度
   var lng = position.coords.longitude;
   var lat = position.coords.latitude;
   // 调用百度地图api显示
   var map = new BMap.Map("map");
   var ggPoint = new BMap.Point(lng, lat);
   // 将google地图中的经纬度转化为百度地图的经纬度
   BMap.Convertor.translate(ggPoint, 2, function(point){
   var marker = new BMap.Marker(point);
   map.addOverlay(marker);
   map.centerAndZoom(point, 15);
   });
   }

   function handleError(error){

   }
   </script>
   <script>
       (function() { // 闭包
   function load_script(xyUrl, callback) {
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = xyUrl;
   // 借鉴了jQuery的script跨域方法
   script.onload = script.onreadystatechange = function() {
   if ((!this.readyState || this.readyState === "loaded" || this.readyState        === "complete")) {
   callback && callback();
   // Handle memory leak in IE
   script.onload = script.onreadystatechange = null;
   if (head && script.parentNode) {
   head.removeChild(script);
   }
   }
   };
   // Use insertBefore instead of appendChild to circumvent an IE6 bug.
   head.insertBefore(script, head.firstChild);
   }
   function translate(point, type, callback) {
   var callbackName = 'cbk_' + Math.round(Math.random() * 10000); //        随机函数名
   var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type
   + "&to=4&x=" + point.lng + "&y=" + point.lat
   + "&callback=BMap.Convertor." + callbackName;
   // 动态创建script标签
   load_script(xyUrl);
   BMap.Convertor[callbackName] = function(xyResult) {
   delete BMap.Convertor[callbackName]; // 调用完需要删除改函数
   var point = new BMap.Point(xyResult.x, xyResult.y);
   callback && callback(point);
   }
   }

   window.BMap = window.BMap || {};
   BMap.Convertor = {};
   BMap.Convertor.translate = translate;
   })();
   </script>
   </html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容