精华内容
参与话题
问答
  • html地图定位

    2015-02-10 17:58:18
    直接上代码: *{ height: 100%; //设置高度,不然会显示不出来 } $(function(){ navigator.geolocation.getCurrentPosition(translatePoint); //定位 ...var curren

    直接上代码:

    <!DOCTYPE html> 
    <html lang="zh-cn"> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title> 
    <style type="text/css"> 
    *{ 
    height: 100%; //设置高度,不然会显示不出来 
    } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4f4374a1409068a557d7184d346f1e09"></script> 
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> 
    <script> 
    $(function(){ 
    navigator.geolocation.getCurrentPosition(translatePoint); //定位 
    }); 
    function translatePoint(position){ 
    var currentLat = position.coords.latitude; 
    var currentLon = position.coords.longitude; 
    var gpsPoint = new BMap.Point(currentLon, currentLat); 
    BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标 
    } 
    function initMap(point){ 
    //初始化地图 
    map = new BMap.Map("map"); 
    map.addControl(new BMap.NavigationControl()); 
    map.addControl(new BMap.ScaleControl()); 
    map.addControl(new BMap.OverviewMapControl()); 
    map.centerAndZoom(point, 15); 
    map.addOverlay(new BMap.Marker(point)) 
    } 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    </body> 
    </html>

    展开全文
  • JS实现HTML地图定位

    千次阅读 2015-07-20 19:12:05
    《分享知识 传递快乐》JS实现HTML地图定位
    分享知识传递快乐

    废话不多说,直接看代码:

    HTML:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度地图</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <script type="text/javascript">
            function load() {
                var map = new BMap.Map("container");
                var point = new BMap.Point(113.67312,34.758085); //默认中心点
                var marker = new BMap.Marker(point);
                var opts = {
                    width: 250,     // 信息窗口宽度  
                    height: 100,     // 信息窗口高度  
                    //title: "信息窗口标题"  // 信息窗口标题  
                }
    			
    			// 创建窗口信息对象。
                //var infoWindow = new BMap.InfoWindow("这里显示提示信息", opts);
    
    
                marker.enableDragging(); //启用拖拽
                marker.addEventListener("dragend", function (e) {
                    point = new BMap.Point(e.point.lng, e.point.lat); //标记坐标(拖拽以后的坐标)
                    marker = new BMap.Marker(point);
    
                    document.getElementByIdx_x("lng").value = e.point.lng;
                    document.getElementByIdx_x("lat").value = e.point.lat;
                    infoWindow = new BMap.InfoWindow("当前位置<br />经度:" + e.point.lng + "<br />纬度:" + e.point.lat, opts);
    
                    map.openInfoWindow(infoWindow, point);
                })
    
                map.addControl(new BMap.NavigationControl()); //左上角控件
                map.enableScrollWheelZoom(); //滚动放大
                map.enableKeyboard(); //键盘放大
    
                map.centerAndZoom(point, 13); //绘制地图
                map.addOverlay(marker); //标记地图
    
    			// 打开信息窗口,infoWindow是创建窗口信息对象的信息
                //map.openInfoWindow(infoWindow, map.getCenter());
    			
    			// 打开信息窗口
    			map.openInfoWindow(map.getCenter());
            }
             
    </script>
    <style type="text/css">
    	html{height: 100%;}
    	body{height: 50%;margin: 0px;padding: 0px;}
    	#container{width:550px;height: 460px;}
    </style>
    </head>
    <body οnlοad="load()">
        <div id="container"></div>
    </body>
    </html>


    展开全文
  • 在使用百度地图的过程中,发现一个很奇怪的现象,有时候调用百度地图js API时,后得到一个错的离谱的地方。然后我自己也就研究了一下jsAPI获取地理位置的相关信息,jsAPI其实都是利用了HTML5中的方法获取地理信息的...

    对于一个地点的经纬度,是确定的?这个问题,我想很多人都会回答,肯定了,可实际上呢?我只能呵呵了。

    在使用百度地图的过程中,发现一个很奇怪的现象,有时候调用百度地图js API时,后得到一个错的离谱的地方。然后我自己也就研究了一下jsAPI获取地理位置的相关信息,jsAPI其实都是利用了HTML5中的方法获取地理信息的。但很奇怪,使用HTML5获取到的经纬度和百度获取的竟然相差很大。

    HTML5获取到的经纬度

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
        else {alert( "Geolocation is not supported by this browser.") }
    } 
    
            function showPosition(position)  
      {
          $("#lngl").val(position.coords.longitude );
          $("#latl").val(position.coords.latitude);   
    }

    百度地图获取经纬度的方法

      // 百度地图API功能
        var map = new BMap.Map("allmap");
        var circle = new BMap.Geolocation();
        var options={};
        options.enableHighAccuracy=true;
        options.timeout=10;
        options.maximumAge=0;
        circle.getCurrentPosition(locationResult, options);  //enableHighAccuracy	Boolean	要求浏览器获取最佳结果。,timeout	Number	超时时间。,maximumAge	Number	允许返回指定时间内的缓存结果。如果此值为0,则浏览器将立即获取新定位结果。
        map.addOverlay(circle);
        var tempGeocoder = new BMap.Geocoder();
        function locationResult(geolocationResult) {
            var Status = this.getStatus()
            if (Status == 0)//检索成功。对应数值“0”。
            {
                $("#lngBaidu").val(geolocationResult.point.lng);
                $("#latBaidu").val(geolocationResult.point.lat);
                var address = geolocationResult.address;
                $("#cityBaidu").val(address.city);
                $("#districtBaidu").val(address.district);
                $("#streetBaidu").val(address.street);          
            else {
                alert("定位失败错误码" + Status)
            }
        }
    高德地图获取经纬的方法

      // 高德地图API功能
            var mapObj, geolocation;
            var MGeocoder;
            mapObj = new AMap.Map('allmap1');
            mapObj.plugin('AMap.Geolocation', function () {
                geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, //是否使用高精度定位,默认:true
                    timeout: 10000,          //超过10秒后停止定位,默认:无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒,默认:0
                    convert: false,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
                    showButton: false,        //显示定位按钮,默认:true
                    buttonPosition: 'LB',    //定位按钮停靠位置,默认:'LB',左下角
                    buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
                    showMarker: false,        //定位成功后在定位到的位置显示点标记,默认:true
                    showCircle: false,        //定位成功后用圆圈表示定位精度范围,默认:true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点,默认:true
                    zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
                });  
                mapObj.addControl(geolocation);
                AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
                AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息      
                geolocation.getCurrentPosition();
            });      
            function onComplete(data) {        
                var lnglatXY = [data.position.getLng(), data.position.getLat()];
                $("#accuracy").val(data.accuracy);
                $("#lng").val(data.position.getLng());
                $("#lat").val(data.position.getLat());
            }
    		 function onError(data) {
                var str = '定位失败;';
                str += '错误信息:'
                switch (data.info) {
                    case 'PERMISSION_DENIED':
                        str += '浏览器阻止了定位操作';
                        break;
                    case 'POSITION_UNAVAILBLE':
                        str += '无法获得当前位置';
                        break;
                    case 'TIMEOUT':
                        str += '定位超时';
                        break;
                    default:
                        str += '未知错误';
                        break;
                }       
                alert(str);
            }

    使用这三种方法获取的经纬度竟然有很大不同!!



    小数点后第一位就有可能不一样了,小数点后第二位是肯定不一样的,0.01的偏差就会导致几十公里的偏差,测试多次依然是这样。

    最后在百度地图的官方文档找到了这样的的话

    百度地图坐标转换API是一套以HTTP形式提供的坐标转换接口,用于将常用的非百度坐标(目前支持GPS设备获取的坐标、google地图坐标、soso地图坐标、amap地图坐标、mapbar地图坐标)转换成百度地图中使用的坐标,并可将转化后的坐标在百度地图JavaScript API、车联网API、静态图API、web服务API等产品中使用。注意Android SDK、iOS SDK、定位SDK和导航SDK坐标转换服务需单独申请

    百度地图官方文档

    才知道HTML5得到的数据是需要转化之后才是百度地图的经纬度。难怪测试了很多次,几乎都有这么大的偏差。

    HTML5经纬度转化为百度地图经纬度的方法:

     var ggPoint = new BMap.Point(position.coords.longitude, position.coords.latitude);//HTML5的经纬度
     var convertor = new BMap.Convertor();
                var pointArr = [];
                pointArr.push(ggPoint);
                convertor.translate(pointArr, 1, 5, translateCallback)
            }
    		 //坐标转换完之后的回调函数
        translateCallback = function (data) {
            if (data.status === 0) {
              //  data.points[0];
           //转换后的百度坐标(正确)
                $("#lngz").val(data.points[0].lng);
                $("#latz").val(data.points[0].lat);
            }
        }

    经过这么转化后,偏差基本上在小数点后前三位基本上都一样了。


    经过测试发现,高德地图似乎直接使用了HTML5返回的经纬度,但没找到相关的文档,百度地图使用的是转化过的经纬度。一个简单的经纬度问题却由于各种原因导致了这么一个背离常识的问题,实在是令人难以理解!!


    如何将非高德坐标转换为高德坐标系

    百度地图坐标转换

    展开全文
  • Html显示地图

    千次阅读 2016-11-25 17:12:05
    Html可以通过JS来实现第三方地图的显示,如: 高德; 效果如下:浏览器小区域和全屏展示   代码如下:把key换成自己申请的key值 高德配置(开发者平台-->控制台)   var map = ...

    Html可以通过JS来实现第三方地图的显示,如: 高德;


    效果如下:浏览器小区域和全屏展示

        

    代码如下:把key换成自己申请的key值


    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=667cbbf11eee369b935122434f031a4d"></script>
    
    
    <div id="container" style="width:500px; height:500px"></div>

    高德配置(开发者平台-->控制台)

     

    <script >
    
        var map = new AMap.Map('container',{
            zoom: 10,
            icon: "punch_dw.png",
            center: [113.466123,22.32666]
        });
        var marker;
        addMarker();
        //在地图上添加图片标记函数
        function addMarker(){
            marker=new AMap.Marker({
                icon:new AMap.Icon({    //复杂图标
                    size:new AMap.Size(125,125),//图标大小
                    image:"punch_dw.png", //大图地址
                    imageOffset:new AMap.Pixel(0,0)//相对于大图的取图位置
                }),
                position:new AMap.LngLat(113.466123,22.32666)
            });
            marker.setMap(map);  //在地图上添加点
    
        }
    
    </script>





    展开全文
  • HTML插入地图

    千次阅读 2018-09-28 10:26:14
    --百度地图容器--&gt; &lt;div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"&gt;&lt;/div&gt; 2.JS (需导入&lt;script type="...
  • 准备工作 ... ... ... 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ... 记住这个Key,等会要用,以后可能也会用,一定要记住。...新建一个DIV,作为地图的容器(这一步和使用其他插件一样,必...
  • HTML 百度地图API调用示例源码

    千次阅读 2013-08-14 09:31:45
    百度地图API调用示例 .iwTitle { color: #CC5522; font-size: 14px; font-weight: bold; white-space: nowrap; } body { font-size: 12px; } var map = new BMap.Map("contai
  • HTML 网站地图与 XML 网站地图

    千次阅读 2012-11-20 11:55:48
    我们熟悉 的站点地图 sitemap 大致分为两种:HTML 站点地图和 XML 站点地图(Sitemaps)。但是 对于搜索引擎优化 SEO 来说,默认的都是 XML Sitemaps。 那么, 究竟在 XML 和 HTML 格式的地图我们到底如
  • HTML嵌入百度地图

    万次阅读 2018-04-15 20:28:36
    我们经常会在各类网站中看到有百度地图的存在,那么百度地图是如何加载到html中的呢? 1.打开网址百度地图API; 2.打开后如图所示,在红框处填写自己想要定位的地址 3.点击左侧彩电设置地图,设置参数,宽高...
  • html5页面中添加腾讯地图api

    千次阅读 2018-04-22 23:05:52
    html5页面中添加腾讯地图api: 点击地图出现详细的地图: 这是一个基于微信端的地图处理方案。 先看看html架构: &lt;a id="aToMap" href=""&gt; &lt;div class="...
  • HTML5地图显示

    千次阅读 2013-11-30 00:24:51
    所以在学习的过程中希望将地图元素融入HTML5中。也当是自己给自己的练习。 于是选择了google Map API作为接口。然后地图的显示理所当然就应该是基于浏览器的,而现在大家使用的浏览器很多种多样,于是我选用了IE ...
  • html5 地图API

    2016-06-23 19:45:47
    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。 ...
  • HTML 中插入地图

    2019-09-15 17:16:29
    打开“百度地图生成器”的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html; 可添加备注、更改标注样式等 获取代码复制即可(原来这么简单啊 ┐(-。ー;)┌) 一个小问题,把代码复制过去之后会发现...
  • html引入腾讯地图

    2020-01-06 10:16:53
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
  • html调用百度地图

    千次阅读 2018-07-13 19:52:30
    步骤一、申请百度地图AK(浏览器端)步骤二、开发
  • HTML5世界地图

    千次阅读 2018-11-29 11:53:00
    HTML5世界地图 在线演示 本地下载 posted @ 2018-11-29 11:53 栖息地 阅读(...) 评论(...) 编辑 收藏
  • HTML - 图像地图

    2014-09-04 14:42:20
    area里shap值可以为:rect、poly、circle area里coords值分别为:"矩形左上角横坐标,矩形左上角纵坐标,矩形右上角横坐标,矩形右上角纵坐标"、"多边形各个定点的值"、"圆心横坐标,圆心纵坐标,半径" ...
  • html 嵌入百度地图

    2013-10-15 19:49:09
    百度地图API自定义地图  html,body{margin:0;padding:0;}  .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}  .iw_poi_...
  • body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{height:500px;width:100%;} #r-result{width:100%; font-size:14px;} 城市名定位 ... // 百度地图API功能 var
  • 中国地图HTML热区

    千次阅读 2007-08-02 14:11:00
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>meta ...
  • HTML5+百度地图API实现地理定位

    千次阅读 2018-01-26 21:59:00
    现在,利用HTML5(以及基于JavaScript的地理定位API),可以使我们很容易地在页面中访问位置信息! 地理定位不算是现有HTML5标准的“直系”成员,不过,它确实是W3C的一个标准,得到了广泛的支持,而且几乎所
  • html 5获取GPS位置,Google地图显示

    万次阅读 2012-10-04 13:32:53
    场景:JQuery Mobile代码片段: $('#mylocation').live('pageshow', function () { if (navigator.onLine) { $("#mylocation_status").text('网络连接正常'); } else { $("#mylocation_status").text
  • 自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器...今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例。请看下面代码: HTML5调用百度地图API进行地理定位实例
  • html网页生成动态地图

    千次阅读 2018-08-17 11:33:57
    主要从http://api.map.baidu.com/lbsapi/creatmap/index.html中获取代码而得: 例如:&lt;script type="text/javascript"&gt;  //创建和初始化地图函数:  function initMap() {  create...
  • html页面插入百度地图

    万次阅读 2018-03-16 10:50:40
    方法/步骤1、打开“百度地图生成器”的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html如下图:2、在“1.定位中心点”中,切换城市,并查找具体位置,如下图:3、在“2.设置地图”中,可以按照自己的...
  • HTML5 SVG世界地图 地图可拖拽和缩放

    千次阅读 2015-01-25 14:09:45
    之前我们已经向大家分享过一些基于HTML5的地图应用,比如jQuery矢量SVG地图插件JVectorMap,以及这款HTML5/CSS3带区域地图的联系表单。今天要分享的这款HTML5地图应用是一张世界地图地图元素是使用SVG绘制的,并且...
  • 初试HTML5地图显示

    千次阅读 2011-06-17 16:20:00
    所以在学习的过程中希望将地图元素融入HTML5中。也当是自己给自己的练习。于是选择了google Map API作为接口。然后地图的显示理所当然就应该是基于浏览器的,而现在大家使用的浏览器很多种多样,于是我选用了IE 8.0...

空空如也

1 2 3 4 5 ... 20
收藏数 13,475
精华内容 5,390
关键字:

html地图