xiyang_1990
xiyang_1990

百度地图使用教程(Javascript版)

准备：

百度地图在线文档：http://developer.baidu.com/map/reference/

百度地图在线实例：http://developer.baidu.com/map/jsdemo.htm


1.百度地图实例化

   需要在页面引入百度地图API
  

Java代码   收藏代码
  1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>  

 

然后在Body添加一个Div，用于显示地图，Div大小可自定义

 

Html代码   收藏代码
  1. <div id="allmap" style="width: 1000px;height: 1000px;" ></div>  

 

之后编写初始化代码

   

Js代码   收藏代码
  1. var map = new BMap.Map("allmap");                // 创建Map实例  
  2. var point = new BMap.Point(116.404, 39.915);      // 创建点坐标  
  3. map.centerAndZoom(point,15);                       // 初始化地图,设置中心点坐标和地图级别。  
  4. map.enableScrollWheelZoom();                       //启用滚轮放大缩小  

 

    2.百度地图位置搜索

   

Js代码   收藏代码
  1. var map = new BMap.Map("allmap");  //实例化百度地图  
  2. var address = "海淀区国家图书馆";      //详细地址  
  3. var lableName = "国家图书馆";        //建筑名称  
  4. var city = "北京";                 //城市  
  5.   
  6. var myGeo = new BMap.Geocoder();   //地址解析器  
  7. /** 
  8.  * 根据地址获得位置坐标，然后实例化百度地图 
  9.  */  
  10. myGeo.getPoint(address, function(point){      
  11.       
  12.   if(point){                
  13.       map.enableScrollWheelZoom();          //启用滚轮放大缩小        
  14.       map.centerAndZoom(point,15);          //初始化地图,设置中心点坐标和地图级别。  
  15.       map.addControl(new BMap.NavigationControl());  //添加平移缩放控件  
  16.       map.addControl(new BMap.OverviewMapControl());  //添加地图缩略图控件        
  17.        //创建标注（类似定位小红旗）  
  18.        var marker = new BMap.Marker(point);   
  19.        //标注提示文本  
  20.        var label = new BMap.Label(lableName,{"offset":new BMap.Size(20,-20)});         
  21.        marker.setLabel(label); //添加提示文本    
  22.        //创建消息框  
  23.        var infoWindow = new BMap.InfoWindow(address);    
  24.        //绑定标注单击事件，设置显示的消息框  
  25.        marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);});  
  26.        map.addOverlay(marker);  //把标注添加到地图  
  27.   }  
  28. }, city);  

    页面效果：


      百度地图使用教程(Javascript版)_第1张图片
 

3.公交线路查询

   

Html代码   收藏代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4. <title>百度地图公交查询</title>  
  5. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>  
  6. <script type="text/javascript">  
  7.   
  8. var map = null;  //实例化百度地图  
  9. var address = "海淀区国家图书馆";      //详细地址  
  10. var lableName = "国家图书馆";        //建筑名称  
  11. var city = "北京";                 //城市  
  12.   
  13. var myGeo = new BMap.Geocoder();   //地址解析器  
  14.   
  15. function initMap(){  
  16.     /**  
  17.      * 根据地址获得位置坐标，然后实例化百度地图  
  18.      */  
  19.     myGeo.getPoint(address, function(point){      
  20.           
  21.       if(point){  
  22.           map = new BMap.Map("allmap");  //实例化百度地图  
  23.           map.enableScrollWheelZoom();          //启用滚轮放大缩小        
  24.           map.centerAndZoom(point,15);          //初始化地图,设置中心点坐标和地图级别。  
  25.           map.addControl(new BMap.NavigationControl());  //添加平移缩放控件  
  26.           map.addControl(new BMap.OverviewMapControl());  //添加地图缩略图控件        
  27.            //创建标注（类似定位小红旗）  
  28.            var marker = new BMap.Marker(point);   
  29.            //标注提示文本  
  30.            var label = new BMap.Label(lableName,{"offset":new BMap.Size(20,-20)});         
  31.            marker.setLabel(label); //添加提示文本    
  32.            //创建消息框  
  33.            var infoWindow = new BMap.InfoWindow(address);    
  34.            //绑定标注单击事件，设置显示的消息框  
  35.            marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);});  
  36.            map.addOverlay(marker);  //把标注添加到地图  
  37.       }  
  38.     }, city);  
  39. }  
  40.   
  41.   
  42.   
  43. //查询公交  
  44. function findPath(){  
  45.  var b = document.getElementById("begin").value;  //起始位置  
  46.  var e = document.getElementById("end").value;    //结束位置  
  47.     //初始化公共公交查询系统  
  48.     var transit = new BMap.TransitRoute(map,{  
  49.       renderOptions:{  
  50.           map:map,  
  51.           panel:'panel'  
  52.         }  
  53.      });  
  54.   
  55.     transit.search(b,e);  //查询  
  56. }  
  57.   
  58. window.onload= initMap();   //初始化百度地图  
  59. </script>  
  60. </head>  
  61. <body>  
  62.   <div id="allmap" style="width: 500px;height: 500px;" ></div><br>  
  63.   <input id="begin" type="text"  />到<input id="end" type="text" />&nbsp;&nbsp;&nbsp;<input value="查询" onclick="findPath()"  type="button" />  
  64.   <br>  
  65.   <div id="panel" ></div>  
  66. </body>  
  67. </html>  

    页面效果：

    
    
 

    5.搜索附近信息

   

Html代码   收藏代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4. <title>Insert title here</title>  
  5. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>  
  6. <script type="text/javascript">  
  7.   
  8. var map = null;  //实例化百度地图  
  9. var address = "海淀区国家图书馆";      //详细地址  
  10. var lableName = "国家图书馆";        //建筑名称  
  11. var city = "北京";                 //城市  
  12.   
  13. var myGeo = new BMap.Geocoder();   //地址解析器  
  14.   
  15. function initMap(){  
  16.     /**  
  17.      * 根据地址获得位置坐标，然后实例化百度地图  
  18.      */  
  19.     myGeo.getPoint(address, function(point){      
  20.       if(point){  
  21.           map = new BMap.Map("allmap");  //实例化百度地图  
  22.           map.enableScrollWheelZoom();          //启用滚轮放大缩小        
  23.           map.centerAndZoom(point,15);          //初始化地图,设置中心点坐标和地图级别。  
  24.           map.addControl(new BMap.NavigationControl());  //添加平移缩放控件  
  25.           map.addControl(new BMap.OverviewMapControl());  //添加地图缩略图控件        
  26.            //创建标注（类似定位小红旗）  
  27.            var marker = new BMap.Marker(point);   
  28.            map.addOverlay(marker);  //把标注添加到地图  
  29.              
  30.            initPanel(point);  //调用搜索  
  31.       }  
  32.     }, city);  
  33. }  
  34.   
  35. //右侧信息面板初始化  
  36. function initPanel(point){  
  37.       //创建圆形范围  
  38.       var circle = new BMap.Circle(point,1000,{  
  39.             strokeWeight: 1 ,  
  40.             fillOpacity: 0.3,   
  41.             strokeOpacity: 0.3  
  42.           });  
  43.         map.addOverlay(circle);  //显示到地图  
  44.         //创建搜索范围，根据搜索关键词分类  
  45.         var local =  new BMap.LocalSearch(map, {renderOptions: {autoViewport: false},onSearchComplete:function(){  
  46.              
  47.             var res = local.getResults();   //返回值  
  48.             var str = ""; //内容  
  49.             var id = ""; //显示的位置  
  50.               
  51.             //根据查询关键词判断  
  52.             if(res.keyword == "公交车"){  
  53.                var busStopArr = new Array();  //车站数组  
  54.                var busNameArr = new Array();  //公交车名称数组  
  55.                id = "busList";  
  56.                  
  57.                //把信息存储到数组  
  58.                for(var i=0;i<res.getNumPois();i++){  
  59.                   var r = res.getPoi(i);  
  60.                   if(r == undefined){  
  61.                    break;  
  62.                   }else{  
  63.                      var arr = r.address.split(";");  
  64.                      busStopArr.push(r.title.replace(/[ ]/g,""));  
  65.                      for(var j=0;j<arr.length;j++){  
  66.                        busNameArr.push(arr[j].replace(/[ ]/g,""));  
  67.                      }  
  68.                   }  
  69.                }  
  70.                //去掉重复的车站信息  
  71.                for(var i=0;i<busStopArr.length;i++){  
  72.                       for(var j=i+1;j<busStopArr.length;j++){  
  73.                          if(busStopArr[i] == busStopArr[j]){  
  74.                              busStopArr.splice(j,1);  
  75.                                j--;  
  76.                          }  
  77.                       }  
  78.                   }  
  79.                //去掉重复的公交车名称  
  80.                for(var i=0;i<busNameArr.length;i++){  
  81.                       for(var j=i+1;j<busNameArr.length;j++){  
  82.                          if(busNameArr[i] == busNameArr[j]){  
  83.                              busNameArr.splice(j,1);  
  84.                                j--;  
  85.                          }  
  86.                       }  
  87.                   }  
  88.                  
  89.                //整理结果  
  90.                strstr=str+"<li>公交站:";  
  91.                for(var i=0;i<busStopArr.length;i++){  
  92.                   strstr=str+' '+busStopArr[i];    
  93.                }  
  94.                strstr=str+"</li>";  
  95.                strstr=str+"<li>公交线路：";  
  96.                for(var j=0;j<busNameArr.length;j++){  
  97.                    strstr=str+' '+busNameArr[j];  
  98.                }  
  99.                strstr=str+"</li>";  
  100.             }  
  101.             //查询地铁信息  
  102.             if(res.keyword == "地铁"){  
  103.               var arr = new Array();  
  104.                id = "metroList";    
  105.                for(var i=0;i<res.getNumPois();i++){  
  106.                   var r = res.getPoi(i);  
  107.                   if(r == undefined){  
  108.                    break;  
  109.                   }else{  
  110.                       //截取信息，存储到数组  
  111.                       if(r.title.substring(0,(r.title.indexOf('站')+1)) != ''){  
  112.                         arr.push({title:r.title.substring(0, (r.title.indexOf('站 ')+1)),mm:Math.round(map.getDistance(point,r.point))});  
  113.                       }   
  114.                           
  115.                   }  
  116.                }  
  117.                   //去掉重复的地铁站信息  
  118.                   for(var i=0;i<arr.length;i++){  
  119.                       for(var j=i+1;j<arr.length;j++){  
  120.                          if(arr[i].title == arr[j].title){  
  121.                                arr.splice(j,1);  
  122.                                j--;  
  123.                          }  
  124.                       }  
  125.                   }  
  126.                     
  127.                   //整理结果  
  128.                   for(var k=0;k<arr.length;k++){  
  129.                     strstr=str+'<li><span class="gj_lx" >'+arr[k].title+" ";  
  130.                            
  131.                     strstr=str+'<span class="lan" >&nbsp;</span>';  
  132.   
  133.                     strstr = str+'</span><span class="gj_m" >'+arr[k].mm+'米</span></li>';  
  134.                         
  135.                   }  
  136.                     
  137.                     
  138.             }  
  139.             document.getElementById(id).innerHTML = str;      
  140.           
  141.         }});    
  142.           
  143.         //获得搜索范围  
  144.         var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());  
  145.           
  146.         //开始搜索  
  147.         local.searchInBounds("公交车",bounds);   
  148.         local.searchInBounds("地铁",bounds);  
  149.    }  
  150.   
  151.   
  152.   //封装好处理圆形范围的算法  
  153.   function getSquareBounds(centerPoi,r){  
  154.       var a = Math.sqrt(2) * r;  
  155.       var getMecator = map.getMapType().getProjection().lngLatToPoint;  
  156.       var getPoi = map.getMapType().getProjection().pointToLngLat;  
  157.   
  158.       mPoi = getMecator(centerPoi);  
  159.       var x0 = mPoi.x, y0 = mPoi.y;  
  160.      
  161.       var x1 = x0 + a / 2 , y1 = y0 + a / 2;  
  162.       var x2 = x0 - a / 2 , y2 = y0 - a / 2;  
  163.         
  164.       var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));  
  165.       return new BMap.Bounds(sw, ne);          
  166.         
  167.   }  
  168.   
  169. window.onload= initMap();   //初始化百度地图  
  170. </script>  
  171. </head>  
  172. <body style="float: left;margin-left: 10px;" >  
  173.   <div id="allmap" style="width: 500px;height: 500px;" ></div>  
  174. <h3>公交车</h3>  
  175. <ul id="busList" ></ul><br>  
  176. <h3>地铁</h3>  
  177. <ul id="metroList" ></ul>     
  178. </body>  
  179. </html>  

 

     结果：

    

 
 

　　　

 

 

  • 查看图片附件

你可能感兴趣的:(百度地图)

  • 百度地图 雷达/地理编码 功能使用 安卓开发者
    目录(?)[-]地图雷达基本使用首先你需要在你的API控制台注册你的雷达初始化并注入你的信息开始上传单次上传定时重复上传取回信息打完收工元古巨坑地理编码最近一直在优化软件的bug..然后后面可能又要大改..所以趁这两天有时间赶紧码两篇博文..=.=地图功能可以说是现在APP中最常用的功能…呃..之一..不管是电商,社交,o2o,b2c,p2p,锟斤拷,烫烫烫都需要用地图来辅助..博客里基本的地图实
  • 百度地图无法显示 绘制点图 js资源丢失问题解决方案 Harry-Wang javascriptdjango前端百度
    百度地图无法显示绘制点图js资源丢失问题解决方案1.地图js资源说明2.查看测试网站判断是否缺失js资源3修复丢失的js资源4Django框架的一些注意最近在做企业网站时使用到了百度地图API，在平台功能与服务中可以点击地图信息可视化平台来制作点图的标记。任务：想要在中国地图上绘制一张覆盖个别城市的点图。但在调试好平台的地图向网页迁移时出现了无法显示的问题。解决方案如下：1.地图js资源说明使用过
  • 微信公众号定位 任小栗 微信公众号微信
    系列文章目录通过高德地图坐标转换接口，完成微信wx.getLocation（）jsdk坐标转换，实现定位高精确度效果微信公众号定位系列文章目录前言一、下载高德二、封装地图组件，vantUI三、拖拽组件，vantUI前言一起开始在百度找了坐标转换，腾讯地图转换成百度地图坐标等等方法但是误差还是很多很难搞，后来看高德原生的地图api里面有浏览器精确定位，我就想着搬到微信公众号，但是公司比较穷，用不起h
  • android中百度定位、城市选择列表，右侧字母展示
    好久好久没光顾过自己空空的博客了，做项目的时候都是逛着别人的博客急着把功能实现，近来闲下来了总结总结。这个城市选择功能也是当时做项目急着实现从哪找来的框架不记得了，然后改改用到项目中来的。非常感谢提供最初源码的博主，主要的区别是添加了搜索功能、定位功能，把以前的操作本地数据库sqlite的部分，改为操作对assest文件的操作，封装的有百度地图定位方法、可删除的edittext。百度地图的key需
  • js实现百度地图的自定义marker与css3动画的交互 沈大大520 css3动画扩展自定义百度地图makerjscss3javascript前端html5
    使用过百度地图，业务需求需要对某些特定标记物进行高亮和动画标记，因此采用css3对百度地图的marker组件进行动态效果的调试，一：调用百度地图的apiDocument.map{width:100%;height:100%;background:#d5e6f5;position:absolute;float:left;}二：初始化百度地图创建实例varmap=newBMapGL.Map("map"
  • H5页面点击调起腾讯/百度/高德地图APP
    注意：在手机端测试时发现了一个问题，用百度浏览器只能调用百度地图app的，对腾讯/高德地图是无效的，于是我用qq浏览器测试，结果发现qq浏览器是都可以调起的。一：腾讯地图（api文档）window.open(`http://apis.map.qq.com/uri/v1/marker?marker=coord:${this.latitude},${this.longitude};addr:${thi
  • 百度地图迁徙大数据深度解析与实战指南
    百度地图迁徙大数据深度解析与实战指南在数字化时代，人口流动数据已成为洞察社会经济活动的关键指标。百度地图依托海量位置数据和AI算法打造的"迁徙大数据"平台，为城市规划、交通管理、商业选址等领域提供了重要决策支持。本文将系统性解析百度地图迁徙大数据的查看方法、核心功能及实战应用场景，帮助读者快速掌握这一数据驱动的决策工具。一、迁徙大数据的核心价值迁徙大数据通过聚合手机用户的定位信息，构建全国范围的人
  • 【DeepSeek实战】17、MCP地图服务集成全景指南：高德、百度、腾讯三大平台接入实战
    引言：为什么MCP是地图服务的下一代革命？在数字化时代，位置服务已成为电商、出行、物流等行业的核心基础设施。但单一地图服务商的局限性日益凸显：某外卖平台因高德地图API突发故障导致30分钟订单配送延迟，某打车软件因百度地图路线规划偏差引发用户投诉激增，某物流企业因腾讯地图POI数据不全导致仓库定位错误……这些问题的根源，在于缺乏一套能统一管理多地图服务的智能平台。MCP（地图控制平台）应运而生。它
  • 百度地图开发之点聚合功能
    }@OverrideprotectedvoidonPause(){mMapView.onPause();super.onPause();}@OverrideprotectedvoidonResume(){mMapView.onResume();super.onResume();}@OverrideprotectedvoidonDestroy(){mMapView.onDestroy();super
  • 开发百度离线地图Java Web项目与无水印瓦片下载工具 王超逸q
    本文还有配套的精品资源，点击获取简介：本项目采用MyEclipse开发环境构建JavaWeb应用程序，实现百度离线地图功能。通过百度地图API获取地图瓦片，并包含无水印瓦片下载工具，需遵循百度地图的使用条款。项目文件包括源代码、配置文件、资源文件，涉及地图API调用、HTTP协议、JavaWeb应用生命周期、MyEclipse使用、地图瓦片坐标系统理解等技术。项目的成功部署需要熟悉Web服务器如T
  • 鸿蒙版地图导航功能开发指南 harmonyos
    鸿蒙版Flutter使用url_launcher插件打开百度地图或高德地图进行导航在Flutter中，可以使用url_launcher插件打开百度地图或高德地图进行导航。以下是实现步骤和代码示例：1.添加依赖在pubspec.yaml文件中添加url_launcher依赖：dependencies:flutter:sdk:flutterurl_launcher:^6.1.10dependency_
  • 利用百度/高德地图API实现车辆轨迹跟踪系统 pk_xz123456 深度学习算法神经网络分类cnn深度学习开发语言目标检测
    利用百度/高德地图API实现车辆轨迹跟踪系统摘要：本文详细阐述了如何利用百度地图API或高德地图API构建一套完整的车辆轨迹跟踪系统。内容涵盖系统架构设计、数据采集与传输、地图API核心功能实现（地图展示、轨迹绘制、实时定位、历史轨迹回放）、关键优化技术（轨迹纠偏、数据压缩、性能优化）、安全与隐私保护、系统扩展性以及实际应用场景分析。目录引言1.1背景与需求分析(物流、出租、共享汽车、特种车辆监控
  • uniapp通过百度地图API获取手机定位及地址 骨子里的偏爱 uniapp开发vue前端uni-appdubbo百度地图地图地址
    uniapp通过百度地图API获取手机定位及地址先获取手机的定位(WGS84)坐标，然后转为BD09坐标,然后通过逆地址编码获取到地址:完整代码如下:步骤一:在manifest.json中加入百度地图的ak，并且勾选上步骤二:在pages.json中加入扩展的信息：步骤三:完整的代码如下:获取位置当前位置（WGS84）：{{location.latitude}},{{location.longit
  • Vue+Cesium：添加高德地图/百度地图/天地图 ssoni_ vue.jsjavascript前端
    1.Viewer查看器控件的设置constviewer=newCesium.Viewer('container',{//地形图层terrain:Cesium.Terrain.fromWorldTerrain(),//信息窗口infoBox:false,//显示查询按钮//geocoder:false,//home按钮//homeButton:false,//控制查看器的显示模式-地球/平面//sc
  • Day09苍穹外卖代码解析以及深入分析 美好的事情能不能发生在我身上 java数据库开发语言后端spring
    文章目录前言一、用户端1.查看历史订单2.查看订单详细信息3.取消订单4.再来一单5.lambda、stream二、服务端1.后台订单搜索2.统计各个状态订单3.查看订单详情4.商家接单5.商家拒单6.百度地图开放平台总结前言Day09作业本次遇到的最大的bug：、&等特殊字符直接写在XML内容中，需要转义为<、>、&等。一、用户端总的service接口：OrderServic
  • android跳转谷歌地图导航,Android使用intent调取导航或者地图 weixin_39582708 android跳转谷歌地图导航
    关于APP的URLScheme相关内容这里就不介绍了大家可以自行去研究研究这里主要介绍地图的相关知识，未来有时间给大家上个demo。百度地图：http://lbsyun.baidu.com/index.php?title=uri/api/android高德地图：http://lbs.amap.com/api/uri-api/android-uri-explain/腾讯地图：http://lbs.q
  • Vue3 引用百度地图部署到服务器，地图展示不出来。 牵只蜗牛去跑步 服务器前端
    浏览器报错信息：becauseitviolatesthefollowingContentSecurityPolicydirective:"script-src*'unsafe-inline''unsafe-eval'".Notethat'worker-src'wasnotexplicitlyset,so'script-src'isusedasafallback.Notethat'*'matches
  • OpenLayers加载百度地图 GIS之路 OpenLayersWebGIS前端
    注：当前使用的是ol5.3.0版本，天地图使用的key请到天地图官网申请，并替换为自己的key随着GIS应用的不断发展，Web地图也越来越丰富，除了像ESRI、超图、中地数码这样GIS厂商有各自的数据源格式，也有Google、百度、高德、腾讯提供的GIS资源，如何加载各种GIS数据源，是WebGIS开发要解决的一个关键问题。本节主要介绍加载百度地图数据。1.如何加载百度地图数据可以参照瓦片地图的方
  • OpenLayers 加载高德地图 GIS之路 WebGISOpenLayers前端
    注：当前使用的是ol5.3.0版本，天地图使用的key请到天地图官网申请，并替换为自己的key随着GIS应用的不断发展，Web地图也越来越丰富，除了像ESRI、超图、中地数码这样GIS厂商有各自的数据源格式，也有Google、百度、高德、腾讯提供的GIS资源，如何加载各种GIS数据源，是WebGIS开发要解决的一个关键问题。本节主要介绍加载高德地图数据。1.如何加载百度地图数据高德地图数据直接按照
  • OpenLayers 加载ArcGIS瓦片数据 GIS之路 OpenLayersWebGISarcgis前端
    注：当前使用的是ol5.3.0版本，天地图使用的key请到天地图官网申请，并替换为自己的key随着GIS应用的不断发展，Web地图也越来越丰富，除了像ESRI、超图、中地数码这样GIS厂商有各自的数据源格式，也有Google、百度、高德、腾讯提供的GIS资源，如何加载各种GIS数据源，是WebGIS开发要解决的一个关键问题。本节主要介绍加载百度地图数据。1.如何加载百度地图数据可以参照瓦片地图的方
  • 地图开发--逆地理编码regeocoding 请叫我秀才 技术人生逆地理编码regeocoding阿里
    应“远才科技公司”需求，开发一个将在服务器上将gps坐标转换成地理名（主要是坐标的道路名）的功能，也就是逆地理编码的功能。网上很容易找到JS版本的逆地理编码程序，百度、阿里都是现在的例子、网页源代码可以看。可要是不通过JS、网页方式逆地理编码，就要花点心思去找找了。经过一阵子的百度、谷歌，没有现成的材料。在比较各大地图API时发现，阿里地图API说明极少，显得好可怜，百度地图有正儿八经的文档，详细
  • React集成百度【JSAPI Three】教程（001）：快速入门 文理棵 百度地图API调用百度apireact.jsthree.js
    文章目录1、快速入门1.1创建react项目1.2安装与配置1.3静态资源配置1.4配置百度地图AK1.5第一个DEMO1、快速入门JSAPIThree版本是一套基于Three.js的三维数字孪生版本地图服务引擎，一套引擎即可支持2D、2.5D、3D全能力的地理投影与数据源加载，帮助开发者轻松搞定平面地图、三维场景，以及地球模式等多种地图业务场景需求。1.1创建react项目npmcreatevi
  • 百度地图（webapi）实现地图拖动定位的功能 哈啤码 地图中心点定位百度地图webapi定位
    需求：拖动地图根据中心点定位，根据定位显示附近的信息，搜索提示利用到的api：当前定位——geolocation.getCurrentPosition()根据城市搜索关键字——BMap.LocalSearch()根据经纬度搜索附近的位置信息——http://api.map.baidu.com/geocoder/v2/?ak=你的秘钥&output=json&pois=1&location=经纬度一
  • retrofit 解析百度地图api 返回数据_新版百度地图建筑数据含高度解析 weixin_39747807 retrofit解析百度地图api返回数据百度地图json区域数据
    注：本文中所述内容仅作为研究用途，不包括任何技术细节，不提供数据爬取、非法攻击的咨询和支持。另：百度建筑轮廓数据中存在明显签名式错误，下载使用容易被追求侵权。矢量瓦片：爬取百度地图必须要了解矢量瓦片。矢量瓦片是二进制数据。技术以maxbox为标准。详情可以参考矢量地理数据如何切片？WebGL:OpenGL的一个javascript绑定。WebGL可以为HTML5Canvas提供硬件3D加速渲染，W
  • 【Folium】使用离线地图 小猪快跑爱摄影 Pythonpython
    文章目录相关文献离线地图下载Folium使用离线地图相关文献Folium—Folium0.19.5documentationOfflineMapMaker离线地图下载我们使用OfflineMapMaker进行地图下载。特别注意：Folium默认支持WGS84坐标系，建议下载WGS84坐标系的地图（比如高德、谷歌等），而类似百度地图（BD09坐标系）默认不支持。由于此软件收费较贵，也可以通过如下链接
  • H5获取用户位置API + 百度地图API介绍 KlayChan HTMl(5)H5Geolocation地理定位
    一.GeolocaitonAPI功能介绍Geolocation接口是一个用来获取设备地理位置的可编程的对象,它可以让Web内容访问到设备的地理位置,这将允许Web应用基于用户的地理位置提供定制的信息.出于安全考虑,当一个Web页尝试获取地理位置信息时,会请求用户批准地理位置访问权限,每个浏览器都有自己请求用户批准该权限的策略和方法.二.GeolocationAPI使用说明GeolocationAP
  • 使用微信小程序开发实现定位和导航功能 DTcode7 微信小程序相关微信小程序小程序移动端前端源码
    使用微信小程序开发实现定位和导航功能基本概念定位导航作用说明示例一：获取当前位置示例二：显示地图并标注位置map组件配置示例三：跳转至高德地图或百度地图跳转按钮示例四：使用微信小程序云开发实现位置服务请求云函数示例五：实现路径规划实际工作开发中的使用技巧在移动应用开发中，定位和导航功能是许多应用场景的核心组成部分。微信小程序作为一种便捷的移动应用形式，也支持实现这些功能。本文将详细介绍如何在微信小
  • HarmonyOS运动开发：如何集成百度地图SDK、运动跟随与运动公里数记录 harmonyos
    前言在开发运动类应用时，集成地图功能以及实时记录运动轨迹和公里数是核心需求之一。本文将详细介绍如何在HarmonyOS应用中集成百度地图SDK，实现运动跟随以及运动公里数的记录。一、集成百度地图SDK引入依赖首先，需要在项目的文件中引入百度地图相关的依赖包："dependencies":{"@bdmap/base":"1.2.6","@bdmap/search":"1.2.6","@bdmap/m
  • QT百度地图应用项目实现 执尺量北斗 qt开发语言
    使用Qt和QWebEngine在C++和HTML之间传递信息的项目实现在现代应用程序中，将C++和JavaScript集成以实现复杂的功能是一个常见的需求。本文将介绍如何使用Qt和QWebEngine结合QWebChannel，在C++端和HTML页面之间传递信息，实现在网页上显示和传递导航信息并保存到本地文件。1、项目简介本项目的目标是构建一个基于Qt的应用程序，该程序可以加载百度地图的HTML
  • WGS84(GPS)、火星坐标系（GCJ02）、百度地图（BD09）坐标系转换Java代码 山塘小鱼儿 GPS火星坐标系百度地图
    在做基于百度地图、高德地图等电子地图做为地图服务的二次开发时，通常需要将具有WGS84等坐标的矢量数据（如行政区划、地名、河流、道路等GIS地理空间数据）添加到地图上面。然而，在线地图大多使用的是火星坐标系，需要事先将矢量数据转为火星坐标系。本文代码针对WGS84(GPS)、火星坐标系（GCJ02）、百度地图（BD09）坐标系之间互相转换。publicclassGpsUtils{privatest
  • Maven Array_06 eclipsejdkmaven
    Maven Maven是基于项目对象模型(POM)， 信息来管理项目的构建，报告和文档的软件项目管理工具。 Maven 除了以程序构建能力为特色之外，还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性，所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法，许多 Apache Jakarta 项目发文时使用 Maven，而且公司
  • ibatis的queyrForList和queryForMap区别 bijian1013 javaibatis
    一.说明         iBatis的返回值参数类型也有种：resultMap与resultClass，这两种类型的选择可以用两句话说明之：         1.当结果集列名和类的属性名完全相对应的时候，则可直接用resultClass直接指定查询结果类
  • LeetCode[位运算] - #191 计算汉明权重 Cwind java位运算LeetCodeAlgorithm题解
    原题链接：#191 Number of 1 Bits 要求： 写一个函数，以一个无符号整数为参数，返回其汉明权重。例如，‘11’的二进制表示为'00000000000000000000000000001011', 故函数应当返回3。 汉明权重：指一个字符串中非零字符的个数；对于二进制串，即其中‘1’的个数。 难度：简单 分析： 将十进制参数转换为二进制，然后计算其中1的个数即可。 “
  • 浅谈java类与对象 15700786134 java
          java是一门面向对象的编程语言，类与对象是其最基本的概念。所谓对象，就是一个个具体的物体，一个人，一台电脑，都是对象。而类，就是对象的一种抽象，是多个对象具有的共性的一种集合，其中包含了属性与方法，就是属于该类的对象所具有的共性。当一个类创建了对象，这个对象就拥有了该类全部的属性，方法。相比于结构化的编程思路，面向对象更适用于人的思维
  • linux下双网卡同一个IP 被触发 linux
    转自： http://q2482696735.blog.163.com/blog/static/250606077201569029441/ 由于需要一台机器有两个网卡，开始时设置在同一个网段的IP，发现数据总是从一个网卡发出，而另一个网卡上没有数据流动。网上找了下，发现相同的问题不少： 一、 关于双网卡设置同一网段IP然后连接交换机的时候出现的奇怪现象。当时没有怎么思考、以为是生成树
  • 安卓按主页键隐藏程序之后无法再次打开 肆无忌惮_ 安卓
    遇到一个奇怪的问题，当SplashActivity跳转到MainActivity之后，按主页键，再去打开程序，程序没法再打开（闪一下），结束任务再开也是这样，只能卸载了再重装。而且每次在Log里都打印了这句话"进入主程序"。后来发现是必须跳转之后再finish掉SplashActivity   本来代码：   // 销毁这个Activity fin
  • 通过cookie保存并读取用户登录信息实例 知了ing JavaScripthtml
    通过cookie的getCookies()方法可获取所有cookie对象的集合；通过getName()方法可以获取指定的名称的cookie；通过getValue()方法获取到cookie对象的值。另外，将一个cookie对象发送到客户端，使用response对象的addCookie()方法。 下面通过cookie保存并读取用户登录信息的例子加深一下理解。 （1）创建index.jsp文件。在改
  • JAVA 对象池 矮蛋蛋 javaObjectPool
    原文地址： http://www.blogjava.net/baoyaer/articles/218460.html Jakarta对象池       ☆为什么使用对象池   恰当地使用对象池化技术，可以有效地减少对象生成和初始化时的消耗，提高系统的运行效率。Jakarta Commons Pool组件提供了一整套用于实现对象池化
  • ArrayList根据条件+for循环批量删除的方法 alleni123 java
    场景如下： ArrayList<Obj> list Obj-> createTime, sid. 现在要根据obj的createTime来进行定期清理。（释放内存） ------------------------- 首先想到的方法就是 for(Obj o:list){ if(o.createTime-currentT>xxx){
  • 阿里巴巴“耕地宝”大战各种宝 百合不是茶 平台战略
    “耕地保”平台是阿里巴巴和安徽农民共同推出的一个 “首个互联网定制私人农场”，“耕地宝”由阿里巴巴投入一亿 ，主要是用来进行农业方面，将农民手中的散地集中起来 不仅加大农民集体在土地上面的话语权，还增加了土地的流通与 利用率，提高了土地的产量，有利于大规模的产业化的高科技农业的 发展，阿里在农业上的探索将会引起新一轮的产业调整，但是集体化之后农民的个体的话语权 将更少，国家应出台相应的法律法规保护
  • Spring注入有继承关系的类（1） bijian1013 javaspring
    一个类一个类的注入 1.AClass类 package com.bijian.spring.test2; public class AClass { String a; String b; public String getA() { return a; } public void setA(Strin
  • 30岁转型期你能否成为成功人士 bijian1013 成功
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • [Velocity三]基于Servlet+Velocity的web应用 bit1129 velocity
    什么是VelocityViewServlet 使用org.apache.velocity.tools.view.VelocityViewServlet可以将Velocity集成到基于Servlet的web应用中，以Servlet+Velocity的方式实现web应用   Servlet + Velocity的一般步骤 1.自定义Servlet，实现VelocityViewServl
  • 【Kafka十二】关于Kafka是一个Commit Log Service bit1129 service
    Kafka is a distributed, partitioned, replicated commit log service.这里的commit log如何理解？   A message is considered "committed" when all in sync replicas for that partition have applied i
  • NGINX + LUA实现复杂的控制 ronin47 lua nginx 控制
    安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
  • java-14.输入一个已经按升序排序过的数组和一个数字， 在数组中查找两个数，使得它们的和正好是输入的那个数字 bylijinnan java
    public class TwoElementEqualSum { /** * 第 14 题： 题目：输入一个已经按升序排序过的数组和一个数字， 在数组中查找两个数，使得它们的和正好是输入的那个数字。 要求时间复杂度是 O(n) 。如果有多对数字的和等于输入的数字，输出任意一对即可。 例如输入数组 1 、 2 、 4 、 7 、 11 、 15 和数字 15 。由于
  • Netty源码学习-HttpChunkAggregator-HttpRequestEncoder-HttpResponseDecoder bylijinnan javanetty
    今天看Netty如何实现一个Http Server org.jboss.netty.example.http.file.HttpStaticFileServerPipelineFactory： pipeline.addLast("decoder", new HttpRequestDecoder()); pipeline.addLast(&quo
  • java敏感词过虑-基于多叉树原理 cngolon 违禁词过虑替换违禁词敏感词过虑多叉树
    基于多叉树的敏感词、关键词过滤的工具包，用于java中的敏感词过滤 1、工具包自带敏感词词库，第一次调用时读入词库，故第一次调用时间可能较长，在类加载后普通pc机上html过滤5000字在80毫秒左右，纯文本35毫秒左右。   2、如需自定义词库，将jar包考入WEB-INF工程的lib目录，在WEB-INF/classes目录下建一个 utf-8的words.dict文本文件，
  • 多线程知识 cuishikuan 多线程
    T1，T2，T3三个线程工作顺序，按照T1，T2，T3依次进行 public class T1 implements Runnable{           @Override      
  • spring整合activemq dalan_123 java spring jms
    整合spring和activemq需要搞清楚如下的东东1、ConnectionFactory分：     a、spring管理连接到activemq服务器的管理ConnectionFactory也即是所谓产生到jms服务器的链接      b、真正产生到JMS服务器链接的ConnectionFactory还得
  • MySQL时间字段究竟使用INT还是DateTime？ dcj3sjt126com mysql
      环境：Windows XPPHP Version 5.2.9MySQL Server 5.1 第一步、创建一个表date_test（非定长、int时间） CREATE TABLE `test`.`date_test` (`id` INT NOT NULL AUTO_INCREMENT ,`start_time` INT NOT NULL ,`some_content`
  • Parcel: unable to marshal value dcj3sjt126com marshal
    在两个activity直接传递List<xxInfo>时，出现Parcel: unable to marshal value异常。   在MainActivity页面（MainActivity页面向NextActivity页面传递一个List<xxInfo>）：   Intent intent = new Intent(this, Next
  • linux进程的查看上（ps） eksliang linux pslinux ps -llinux ps aux
    ps:将某个时间点的进程运行情况选取下来 转载请出自出处：http://eksliang.iteye.com/admin/blogs/2119469 http://eksliang.iteye.com         ps 这个命令的man page 不是很好查阅，因为很多不同的Unix都使用这儿ps来查阅进程的状态，为了要符合不同版本的需求，所以这个
  • 为什么第三方应用能早于System的app启动 gqdy365 System
    Android应用的启动顺序网上有一大堆资料可以查阅了，这里就不细述了，这里不阐述ROM启动还有bootloader，软件启动的大致流程应该是启动kernel -> 运行servicemanager 把一些native的服务用命令启动起来（包括wifi, power, rild, surfaceflinger, mediaserver等等）-> 启动Dalivk中的第一个进程Zygot
  • App Framework发送JSONP请求(3) hw1287789687 jsonp跨域请求发送jsonpajax请求越狱请求
    App Framework 中如何发送JSONP请求呢? 使用jsonp,详情请参考:http://json-p.org/ 如何发送Ajax请求呢? (1)登录 /*** * 会员登录 * @param username * @param password */ var user_login=function(username,password){ // aler
  • 发福利，整理了一份关于“资源汇总”的汇总 justjavac 资源
    觉得有用的话，可以去github关注：https://github.com/justjavac/awesome-awesomeness-zh_CN 通用 free-programming-books-zh_CN 免费的计算机编程类中文书籍 精彩博客集合 hacke2/hacke2.github.io#2 ResumeSample 程序员简历
  • 用 Java 技术创建 RESTful Web 服务 macroli java编程WebREST
    转载：http://www.ibm.com/developerworks/cn/web/wa-jaxrs/   JAX-RS (JSR-311) 【 Java API for RESTful Web Services 】是一种 Java™ API，可使 Java Restful 服务的开发变得迅速而轻松。这个 API 提供了一种基于注释的模型来描述分布式资源。注释被用来提供资源的位
  • CentOS6.5-x86_64位下oracle11g的安装详细步骤及注意事项 超声波 oraclelinux
    前言： 这两天项目要上线了，由我负责往服务器部署整个项目，因此首先要往服务器安装oracle，服务器本身是CentOS6.5的64位系统，安装的数据库版本是11g，在整个的安装过程中碰到很多的坑，不过最后还是通过各种途径解决并成功装上了。转别写篇博客来记录完整的安装过程以及在整个过程中的注意事项。希望对以后那些刚刚接触的菜鸟们能起到一定的帮助作用。   安装过程中可能遇到的问题（注
  • HttpClient 4.3 设置keeplive 和 timeout 的方法 supben httpclient
    ConnectionKeepAliveStrategy kaStrategy = new DefaultConnectionKeepAliveStrategy() { @Override public long getKeepAliveDuration(HttpResponse response, HttpContext context) { long keepAlive
  • Spring 4.2新特性-@Import注解的升级 wiselyman spring 4
    3.1 @Import @Import注解在4.2之前只支持导入配置类 在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean 3.2 示例 演示java类 package com.wisely.spring4_2.imp; public class DemoService { public void doSomethin
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他