最全面的百度地图JavaScript离线版开发
webview与javascript交互并调用baidu地图服务(内部资料)
java中处理javascript响应-1
Android 软件工程师系列课程
处理WebView加载网页弹出的对话框。
setWebChromeClient(WebChromeClient client) 创建WebChromeClient对象,根据网页弹出的对话框重写响应方法 :
►onJsAlert(WebView view, String url, String msg, JsResult result) ►onJsConfirm(WebView view, String url, String msg, JsResult result) ►onJsPrompt(WebView view, String url, String msg, String defaultValue, JsPromptResult result)
添加java方法的调用接口,允许javascript脚本调用java方法:
►addJavascriptInterface(Object obj, String interfaceName) ►Object对象中自定义需要调用的方法,方法通常使用Handler调用,字 符串参数作为调用的接口名。
通过loadUrl(String url)方法在java方法中访问javascript脚本中的方 法
WebView支持javascript-1
Android 软件工程师系列课程
如果访问的页面中有Javascript,则webview必须设置支持 Javascript。
设置WebView对象支持javascript:
WebSettings set = webview.getSettings(); set.setJavaScriptEnabled(true);
ArcGIS API for JavaScript 离线地图调用源码示例功能
ArcGIS API for JavaScript 离线地图调用源码示例功能一、概述ArcGIS API for JavaScript离线地图调用源码示例提供了道路交通图的离线加载功能、卫星影像离线加载功能、矢量标注功能、矢量编辑功能和测量功能等,旨在为用户提供一个可以快速加载离线地图或在线地图的解决方案,并提供技术支持。
除了现有基本功能之外,还可以根据用户的实际需求免费开发工作量较小的新功能(包括个性化需求),如果工作量较大,则会根据工作量的大小和技术难易程序收取一定费用。
ArcGIS API for JavaScript离线地图调用示例如何用ArcGIS API 发布离线卫星地图二、功能简介ArcGIS API for JavaScript离线地图调用源码示例的具体功能主要包括加载道路交通图、加载卫星影像、绘点、绘线、绘自由线、绘多边形、绘自由面、绘矩形、绘圆、绘椭圆、绘箭头、绘三角、矢量绘制数据编辑、距离测量和面积测量功能等。
1.加载道路交通图ArcGIS API for JavaScript离线地图调用源码示例中提供了道路交通图加载功能,离线道路交通图可以用万能地图下载器下载。
2.加载高清卫星地图ArcGIS API for JavaScript离线地图调用源码示例中提供了卫星地图加载功能,离线高清卫星地图可以用万能地图下载器下载。
3.绘点ArcGIS API for JavaScript离线地图调用源码示例中提供了绘制点标注功能,标注后可以填写名称、备注和修改图标等。
4.绘线ArcGIS API for JavaScript离线地图调用源码示例中提供了绘制矢量线功能,可以为绘制的线设置名称、备注、线颜色和线宽等。
5.绘自由线ArcGIS API for JavaScript离线地图调用源码示例中提供了绘制自由线功能,可以为绘制的线设置名称、备注、线颜色和线宽等。
6.绘多边形ArcGIS API for JavaScript离线地图调用源码示例中提供了绘制多边形的功能,可以为绘制的多边形设置名称、备注、设置边线颜色、填充颜色和不透度明等。
百度地图开发说明文档
百度地图说明文档1.界面展示界面整体分为4部分,主地图显示区、鼠标测距地图区、按钮与输入区、结果面板区。
主地图显示区用于除测距以外的功能显示,鼠标测距地图区只用于鼠标测距,结果面板区显示部分查询结果。
功能实现包括基本操作功能:鼠标滚轮放大、缩小、全图、拖拽平移、卫星地图切换、鼠标测距,其他功能有(1)定位查询(输入经纬度坐标在图上查询具体位置)(2)经纬度坐标获取(鼠标点击获取图上经纬度坐标)(3)快速查询(不同行政区级别点击查询缩放到当前位置,通过城市定位和关键字提示实现)(4)关键词查询(输入查询内容将查询结果显示到控制面板和图上)(5)覆盖物叠加(点击按钮将覆盖物添加到图上)(6)删除覆盖物(点击按钮删除覆盖物,包括关键字查询、路线查询在图上显示的覆盖物,用于清除查询结果,便于二次查询)(7)信息窗口(点击图上点覆盖物弹出信息窗口)(8)地址解析/逆解析、添加点线面(直接选用工具条上按钮进行绘制)(9)编辑功能(点击按钮开启/关闭编辑)(10)获取绘制的覆盖物个数,清除所有覆盖物(11)步行路线规划(包括地图上显示和结果面板显示)(12)驾车路线规划(信息窗口显示驾车所需时间和行驶距离,地图和结果面板显示路线)(13)公交车和地铁路线查询(输入公交车或地铁号,在结果面板显示经过的站点及发车信息)(14)公交车出行路线规划(地图上显示路线)(15)输入时关键字提示(16)右下角打开路况提示以下为部分功能实现效果截图关键字查询(结果显示在地图上)关键字查询结果显示在结果面板步行路线规划驾车路线规划公交车和地铁路线站点查询,结果显示在查询面板公交路线规划2.框架界面先分成左右两部分,container1、container2分别占70%和30%,左侧上部为主地图allmap占70%,下部按钮输入区container3占30%,右侧鼠标测距区allmap1占30%,结果面板r-result占70%。
离线百度地图,QT添加按钮点击切换卫星地图和街道地图
离线百度地图,QT添加按钮点击切换卫星地图和街道地图⼀ 、⾸先,需要在⾃⼰的map.html⽂件内添加:var bdmapcfg;// 切换地图类型function satemap(){//百度地图api配置bdmapcfg = {'home':'../../baidumapv2/', //api主⽬录'imgext':'.jpg', //⽡⽚地图后缀'tiles_dir':'../../baidumapv2/satellite' //⽡⽚图⽬录};bdmapcfg.tiles_dir="../../baidumapv2/satellite";loadJScript();}function normalmap(){//百度地图api配置bdmapcfg = {'home':'../../baidumapv2/', //api主⽬录'imgext':'.png', //⽡⽚地图后缀'tiles_dir':'../../baidumapv2/roadmap' //⽡⽚图⽬录};bdmapcfg.tiles_dir="../../baidumapv2/roadmap";loadJScript();}//百度地图api功能function loadJScript(){var script = document.createElement("script");script.type = "text/javascript";script.src = "../../baidumapv2/baidumap_offline_v2_20160921_min.js";document.body.appendChild(script);//异步加载增加代码window.BMap=window.BMap||{};window.BMap.apiLoad = function(){delete window.BMap.apiLoad;if(typeof init == "function"){init();}}}function init(){var lon = 116.403694,lat = 39.914271;var onlinemap = new OnlineMap(lon,lat,"map_demo");onlinemap.init();}//异步加载地图window.onload = loadJScript;⼆、QT中添加两个QRadioButton,⽤来切换地图类型:connect(ui->radioButton,SIGNAL(clicked(bool)),this,SLOT(checkMapType()));connect(ui->radioButton_2,SIGNAL(clicked(bool)),this,SLOT(checkMapType()));void MainWindow::checkMapType(){if(ui->radioButton->isChecked()){QString command = QString("normalmap()");ui->widget->page()->runJavaScript(command);}else if(ui->radioButton_2->isChecked()){QString command = QString("satemap()");ui->widget->page()->runJavaScript(command);}}三、最后还需要添加⼀个js⽂件:mapControl.js :function OnlineMap( lon, lat, dom, mapType) {debugger;var isShow = false;var t1;//地图上加载⼀个要素function addCircle() {remove_overlay();var SW = new BMap.Point(lon - 0.022146, lat - 0.018801);var NE = new BMap.Point(lon + 0.022317, lat + 0.018025);groundOverlayOptions = {opacity : 0.3,displayOnMinLevel : 13,displayOnMaxLevel : 18}// 初始化GroundOverlayvar groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);// 设置GroundOverlay的图⽚地址groundOverlay.setImageURL("images/leida_white.gif");map.addOverlay(groundOverlay);}//清除覆盖物function remove_overlay() {map.clearOverlays();}//⾃动刷新要素信息function refreshFlyInfo() {var level = map.getZoom();if (level < 13) {//remove_overlay();isShow = false;//window.clearInterval(t1);} else {isShow = true;}if (isShow) {addCircle();}}OnlineMap.prototype.init = function(mapType) {map = "";map = new BMap.Map(dom,{enableMapClick:false}); // 创建Map实例point = new BMap.Point(lon, lat);map.centerAndZoom(point, 18);map.setMaxZoom(21);if(mapType){map.setMapType(mapType);}map.enableScrollWheelZoom(); //启⽤滚轮放⼤缩⼩t1 = window.setInterval(function() {refreshFlyInfo();}, 3000);map.addEventListener("zoomend", function() {window.clearInterval(t1);if (this.getZoom() < 13) {//remove_overlay();} else {for (var i = 0; i < map.getOverlays().length; i++) {map.getOverlays()[i].show();}t1 = window.setInterval(function() {refreshFlyInfo();}, 1000);addCircle();}});addCircle();}//显⽰点图标和⽂字信息OnlineMap.prototype.pointsInfo = function(flyInfo) {addCircle();if (flyInfo.length > 0) {for (var i = 0; i < flyInfo.length; i++) {var point1 = new BMap.Point(Number(flyInfo[i].x),Number(flyInfo[i].y));var marker = new BMap.Marker(point1); // 创建标注marker.setTop(true);var icon = new BMap.Icon("images/fly.png",new BMap.Size(80, 80));var iconshaow = new BMap.Icon("/images/fly_shadow.png", new BMap.Size(50, 50)); marker.setIcon(icon);marker.setZIndex(100);marker.setShadow(iconshaow);if (map.getZoom() >= 13) {map.addOverlay(marker); // 将标注添加到地图中}var label = new bel(flyInfo[i].message, {offset : new BMap.Size(20, -10)});marker.setLabel(label);}}}}对了,别忘了在map.html中添加:这是加载mapControl.js的路径<script type="text/javascript" src="../mapControl.js"></script>。
离线地图API应用开发
离线地图应用开发一、需求:在web开发中可能遇到这样的需求:需要一个地图系统,选择谷歌或百度地图来完成地图的展示,但是该web系统由于特殊性而不允许与外网链接,还有就是现在对国家对谷歌网络限制访问导致越来越不稳定,或者由于网络地图接口变更和升级造成接口失效,因此希望将地图地系统移植到内网中使用。
二、需要的技术点:可以将map api分为3个部分来看待:1、负责与服务器交互的js文件(API)2、地图系统提供的应用,例如地址标注、区域标注、周边搜索等等3、地图数据三、解决方法:地图应用系统主要是第2部分的应用开发,一般地地图应用,例如加载地图、标注,地图移动等功能,是完全可以将地图移植到内网来处理的。
这种方法也适用于自定义周边搜索,例如需要完成的web功能就是通过查询,获取指定范围内的建筑物、获取自定的标记(开发本地商户搜索系统的时候,地图上商户数据的维护肯定是有web自己维护,而并非网络地图提供的数据,这种场景正好适合)。
下来来说如何将map本地化,可以分为两个步骤:1、将map使用的与服务器交互的js文件本地化这个当然是根据map加载时候,所需要的js下载到本地,以后再应用程序开发的时候,不引用网络站点上的js,而是换成本地的js文件,并予以修改、替换为对本地js的调用。
2、将map的地图数据(tiles:瓦片)下载到本地,以及应用的开发说到地图数据,需要了解map的一点基础知识。
把在浏览器中显示的地图,分割成一块一块的图片,称之为tile,在浏览其中显示地图的部分,从网络地图下载各个tile,然后拼接在一起,就能够看到完整的一幅地图。
这样通过本地地图接口和地图数据,基本实现和互联网地图API相同的功能(除一些大数据计算类的复杂应用都是在地图服务器上,无法下载,开发也不太现实)。
四、应用案例:临沂市统计局《统计基础信息管理系统》,对企业网格化管理中,使用地图展示、查询企业位置。
(内外网通用,地图数据可内外网切换)地图模式效果图如下:可按条件、按周边等查询企业,不同标识显示。
百度地图
覆盖物
• 所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。 如标注、矢量图形元素(包括:折线和多边形和圆)、定位图 标等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图 时,它们会相应的处理。 • 覆盖物包括:本地覆盖物和搜索覆盖物
MarkerOptions
• 某个类型的覆盖物,包含多个类型相同、显示方式 相同、处理方式相同的项时,使用此类。或者用来 标记位置。 • 开发步骤
– – – – 设置 marker 覆盖物的位置坐标:position(LatLng position) 设置 marker 覆盖物的标题:title(ng.String title) 设置 Marker 覆盖物的图标:icon(BitmapDescriptor icon) 设置 marker 是否允许拖拽,默认不可拖拽: draggable(boolean draggable)
• 添加引擎到AndcSDK_5.0、 liblocSDK5.so 到libs\armeabi目录下 – 注: locSDK_5.需求自行添加。
• • • • 控制MapView的; SDKInitializer对象创建一个就可onResume、onPause、onDestroy以; 必须校验key,并且key值不能为空; Initialize方法接受的参数必须是global Application,不能传递Activity。
“Hello World”
覆盖物
– – – – – – 搜索覆盖物抽象类: OverlayManager (核心类) 本地搜索覆盖物:PoiOverlay 驾车路线覆盖物:DrivingRouteOverlay 步行路线覆盖物:WalkingRouteOverlay 换乘路线覆盖物:TransitOverlay 公交路线覆盖物:BusLineOverlay
百度地图Baidu Map API中文开发文档
控件 _______________________________________________________________7
地图控件概述 ___________________________________________________________ 7 向地图添加控件 _________________________________________________________ 7 控制控件位置 ___________________________________________________________ 8 修改控件配置 ___________________________________________________________ 8 自定义控件 _____________________________________________________________ 8
定义标注图标 _________________________________________________________________ 10 监听标注事件 _________________________________________________________________ 11 可托拽的标注 _________________________________________________________________ 11 内存释放 _____________________________________________________________________ 12
百度地图API使用(JS案例Web服务器案例)
百度地图API使⽤(JS案例Web服务器案例)前⾔这⼏天在项⽬中⽤到了百度地图这个插件,所以准备花点时间记录⼀下⼼得,好东西就要分享出来!1. 百度地图使⽤⽅式1.11.2 申请AK我的需求时web端,所有这⾥选择了浏览器端。
⽩名单上线前使⽤*号,线上正式ak请设置合理的IP⽩名单2.主要学习: 定位技术、路径规划和导航2.1 打开2.2 点击开发指南中的2.3⾄此,我们就快速创建了⼀张以天安门为中⼼的地图~注意: ak=必须时⾃⼰申请的3. 常见相关API 可以在这⾥查找这⾥只介绍⼀些常⽤的3.11<!DOCTYPE html>2<html>3<head>4<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6<title>Hello, World</title>7<style type="text/css">8html{9height:100%10}11body{12height:100%;13margin:0px;14padding:0px 15}16#container{17height:100%18}19</style>20<script type="text/javascript" src="https:///api?v=3.0&ak=iG0Qt0gY2IMtf99aZe0j7d1cNnXxIhwM"></script>21</head>2223<body>24<div id="container"></div>25<script type="text/javascript">26// 创建地图实例27var map = new BMap.Map("container");28// 创建点坐标29var point = new BMap.Point(116.404, 39.915);30// 初始化地图,设置中⼼点坐标和地图级别31map.centerAndZoom(point, 15);32</script>33</body>34</html>3.2可以给地图中的点添加标注,添加标注的时候要⼀个point(坐标)对象,把标注添加到坐标位置。
JavaScript接入百度地图API的方法步骤
JavaScript接⼊百度地图API的⽅法步骤⽬录⼀、百度地图API接⼊⼆、在HTML中使⽤百度地图API1、在html中引⼊百度地图js⽂件2、在⽹页中定义⼀个DIV⽤于显⽰地图3、在⽹页中显⽰地图4、添加可选控件5、定位功能6、添加地图标记7、给地图标记添加点击事件8、添加信息窗⼝9、路径规划10、正逆地址解析⼀、百度地图API接⼊1、搜索百度地图开发平台2、注册百度账号3、登陆并申请成为开发者4、在百度地图开发平台的⾸页选择控制台,在控制台中创建应⽤创建好应⽤以后就能在控制台我的应⽤中看到这个应⽤,其中最重要的是AK,这是百度地图分配给我们应⽤的⼀个专⽤的秘钥,必须使⽤秘钥才能访问百度地图API。
⼆、在HTML中使⽤百度地图API1、在html中引⼊百度地图js⽂件<script type="text/javascript" src="/api?v=1.0&type=webgl&ak=您的密钥"></script>将ak后的值替换为我们⾃⼰的秘钥。
2、在⽹页中定义⼀个DIV⽤于显⽰地图显⽰地图的DIV⼀定要有id属性。
3、在⽹页中显⽰地图基础步骤:var map = new BMapGL.Map("container"); // 创建地图实例var point = new BMapGL.Point(116.404, 39.915); // 通过地理位置的经纬度创建点坐标map.centerAndZoom(point, 15); // 初始化地图,设置中⼼点坐标和地图级别可选步骤:map.centerAndZoom(point, 15); // 初始化地图,设置中⼼点坐标和地图级别map.enableScrollWheelZoom(true); //开启⿏标滚轮缩放map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式4、添加可选控件var scaleCtrl = new BMapGL.ScaleControl(); // 添加⽐例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件map.addControl(zoomCtrl);var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件map.addControl(cityCtrl);var locationControl = new BMapGL.LocationControl(); // 添加定位控件map.addControl(locationControl);5、定位功能百度地图⽀持浏览器定位和IP定位,当浏览器定位失败时,会默认采⽤IP定位。
百度地图的简单使用——htmljs
百度地图的简单使⽤——htmljs⼀、简介百度地图JavaScript API是⼀套由JavaScript语⾔编写的应⽤程序接⼝,它能够帮助您在⽹站中构建功能丰富、交互性强的地图应⽤,包含了构建地图基本功能的各种接⼝,提供了诸如本地搜索、路线规划等数据服务。
基本地图功能:展⽰(⽀持2D图、3D图、卫星图)、平移、缩放、拖拽等。
地图控件展⽰功能:可以在地图上添加/删除鹰眼、⼯具条、⽐例尺、⾃定义版权、地图类型及定位控件,并可以设置各类控件的显⽰位置。
覆盖物功能:⽀持在地图上添加/删除点、线、⾯、热区、⾏政区划、⽤户⾃定义覆盖物等;开源库提供富标注、标注管理器、聚合marker、⾃定义覆盖物等功能。
⼯具类功能:提供经纬度坐标与屏幕坐标互转功能;开源库⾥提供测距、⼏何运算及GPS坐标/国测局坐标转百度坐标等功能。
定位功能:⽀持IP定位及浏览器(⽀持html5特性浏览器)定位功能。
右键菜单功能:⽀持在地图上添加右键菜单。
⿏标交互功能:⽀持动态修改⿏标样式、⿏标拖拽/缩放地图及⿏标绘制等功能。
图层功能:⽀持重设地图底图、地图上叠加实时交通图层或⾃定义图层功能。
本地搜索功能:包括根据城市、矩形范围、圆形范围等条件进⾏POI搜索;且⽀持⽤户⾃有数据的检索。
公交检索:⽀持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;检索结果⽀持便捷、可换乘、少步⾏、不乘地铁四种⽅案。
驾车检索:⽀持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;返回最短时间、最短距离、避开⾼速的驾车导航结果;且提供计算打车费⽤服务。
步⾏导航:提供步⾏导航⽅案。
逆/地理编码:⽀持百度坐标与地址描述信息之间的转换服务。
个性化数据展⽰功能:⽤户⾃有数据存储到LBS.云后,JavaScript API可以提供以⿇点图形式展⽰⾃有数据功能。
⼆、地图的引⼊<!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>Hello, World</title><style type="text/css">html{height:100%}body{height:100%;margin:0px;padding:0px}#container{height:100%}</style><script type="text/javascript" src="/api?v=1.5&ak=您的密钥">//v1.5版本的引⽤⽅式:src="/api?v=1.5&ak=您的密钥"//v1.4版本及以前版本的引⽤⽅式:src="/api?v=1.4&key=您的密钥&callback=initialize"</script></head><body><div id="container"></div><script type="text/javascript">var map = new BMap.Map("container"); // 创建地图实例var point = new BMap.Point(116.404, 39.915); // 创建点坐标map.centerAndZoom(point, 15); // 初始化地图,设置中⼼点坐标和地图级别</script></body></html>解析各个部分的作⽤:准备页⾯ 根据HTML标准,每⼀份HTML⽂档都应该声明正确的⽂档类型,我们建议您使⽤最新的符合HTML5规范的⽂档声明:<!DOCTYPE html> 下⾯我们添加⼀个meta标签,以便使您的页⾯更好的在移动平台上展⽰。
百度地图API开发指南 (2)ppt课件
Mapbar Mapabc 51ditu 谷歌
坐标转换
坐标转换接口说明
请求接口中有四个参数: from: 被转换的坐标体系 to: 转换到这个坐标体系 x: 经度 y: 纬度 接口应答中有三个key:(应答格式如:基础知识地图的“Hello, World”
五、创建点坐标
◦ var point = new BMap.Point(116.404, 39.915); ◦ 这里我们使用BMap命名空间下的Point类来创建一个坐标
点。Point类描述了一个地理坐标点,其中116.404表示 经度,39.915表示纬度。 • 六、地图初始化
地图图层自定义图层 地图中提供一个BMap.TileLaye度地图上叠加一层 自定义的图块。
以下代码在每个图块的所有缩放级别上显示一个简
单的透明叠加层,使用浮动红色小水滴表示图块的 轮廓。
◦ var map = new BMap.Map("container");
地图覆盖物概述
所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括: 折线和多边形)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时, 它们会相应的移动。
地图API提供了如下几种覆盖物: Overlay:覆盖物的抽象基类,此类不可实例化,所有的覆盖物均继承此类的方法。 Marker:标注表示地图上的点,可自定义标注的图标。 Label:表示地图上的文本标注,您可以自定义标注的文本内容。 Polyline:表示地图上的折线。 Polygon:表示地图上的多边形。多边形类似于
目录
简介 基础知识 控件 覆盖物 事件 地图图层 工具 服务 套由JavaScript语言编写的应用程 序接口,它能够帮助您在网站中构建功能丰, 还提供了诸如本地搜索、路线规划等数据服务。
最全面的百度地图JavaScript离线版开发
最全面的百度地图JavaScript离线版开发最全面的百度地图JavaScript离线版开发项目要求web版百度地图要离线开发。
这里总结下自己的开发过程和经验。
大概需求是:每辆车上安装有公司接收机,会实时反馈车辆的坐标、速度、转向等信息,接收到各车辆信息后在百度地图上实时画出车辆位置。
作业点不一定都有网络,所以要求离线开发。
此过程主要有三个技术点:1.如何获取离线的API2.如何获取离线瓦片图3.如何在离线状态下将WGS坐标转换成百度地图坐标解决问题过程:1.既然百度地图官方不支持离线地图,那么我们需要想办法把在线的代码改成离线的代码。
这里可以参考:/smzd/blog/548538这里整理好了一份,其中也按照示例Demo写了一份离线的Demo。
当然离线的不可能做到和在线一样完美,毕竟还是有些功能用不了的。
(此版本是基于百度地图APIV2.0)使用方法:复制代码1.确定你用的瓦片的图片后缀,如.png,.jpg。
修改baidumap_offline_v2_load.js中的imgextvarbdmapcfg={''imgext'':''.jpg'',//瓦片图的后缀------根据需要修改,一般是.png.jpg''tiles_dir'':''''//瓦片图的目录,为空默认在baidumap_v2/tiles/目录};2.确定你用的瓦片的目录,默认在baidumap_v2/tiles/目录下,你也可以改成其他地址。
修改baidumap_offline_v2_load.js中的tiles_dir3.参考demo编写代码,要点如下:1)只需要加载load文件2)加载css文件(貌似可不需要)3)定义个放置地图的容器,并用css控制高度和宽度4)书写js代码//百度地图API功能varmap=newBMap.Map("map_demo");//创建Map实例map.centerAndZoom(newBMap.Point(116.404,39.915),8);//初始化地图,设置中心点坐标和地图级别//map.addControl(newBMap.MapTypeControl());//添加地图类型控件离线只支持电子地图,卫星/三维不支持//map.setCurrentCity("北京");//设置地图显示的城市离线地图不支持!!enableScrollWheelZoom(true);//开启鼠标滚轮缩放map.addControl(newBMap.NavigationControl());//缩放按钮复制代码2.获取瓦片图这里可以参考:/smzd/blog/619397当然网上也有下载工具,比如:全能电子地图下载器3.直接将接收机接收到的坐标(WGS)放入百度地图中是有偏差的,这是因为百度地图为了安全做了特殊处理。
js调用百度地图api并在地图上进行打点添加标注
js调⽤百度地图api并在地图上进⾏打点添加标注最近要做⼀个⽹页,具体内容是:上边有⼀个标题,下边分成两块,左边是地图。
并且地图上有两个点,点击两个点有相应的提⽰信息,显⽰数据库⾥最新的两条数据信息。
右边是⼀些⽂字说明。
本⼈刚开始学习,做的也不是很好总体效果如下所⽰:⾸先新建map.php⽂件,代码如下复制代码代码如下:<!DOCTYPE html><?php/*创建与数据库的连接*/$conn=mysql_connect("","","") or die("can not connect to server");mysql_select_db("hdm0410292_db",$conn);mysql_query("set names utf8");//选择出两辆车插⼊的最新数据,并将两条语句存在数组⾥$sql0="select * from car_info where carID='20140508'order by id desc limit 1";$sql1="select * from car_info where carID= '20140510' order by id desc limit 1";$sql=array($sql0,$sql1);><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><style type="text/css">html{height:99%}body{height:99.9%;width:99%;font-family:楷体_GB2312;font-size:25px}#container {height: 100%}</style><script type="text/javascript"src="/api?v=1.5&ak=你申请的秘钥"></script></head><body BGCOLOR="#CAFFFF"><div id="container"></div><script type="text/javascript">var lon_center = 0;var lat_center = 0;var map = new BMap.Map("container");<!-- 添加标注的函数,参数包括,点坐标,车ID,以及数据库⾥的其他信息-->function addMarker(point,index,s){var fIcon = new BMap.Icon("car1.png", new BMap.Size(55, 43), {});var sIcon = new BMap.Icon("car2.png", new BMap.Size(55, 43), {});var myIcon = "";myIcon=fIcon;elsemyIcon=sIcon;var marker = new BMap.Marker(point, {icon: myIcon});map.addOverlay(marker);marker.addEventListener("click",function(){var opts={width:450,height:500,title:"详细信息"};var infoWindow = new Window(s,opts);map.openInfoWindow(infoWindow,point);});}<?php//遍历数组⾥的两条sql语句foreach ($sql as &$value) {$query=mysql_query($value);$row=mysql_fetch_array($query);>var lon= <?php echo $row[longitude] ?>;var lat= <?php echo $row[latitude] ?>;<!-- 计算两个点的中⼼点,并将其作为地图初始化时的中⼼位置-->lon_center += lon;lat_center += lat;var id=<?php echo $row[id] ?>;var info="<br/>"+"carID: " + "<?php echo $row[carID]?>" + " <br/> " +"经度: " + "<?php echo $row[longitude]?>" + " <br/> " +"纬度: " + "<?php echo $row[latitude]?>" + " <br/> " +"速度: " + "<?php echo $row[speed]?>" + "Km/h" + " <br/> " +"加速度: " + "<?php echo $row[acceleration]?>" + " <br/> " +"⽅向: " + "<?php echo $row[direction]?>" + " <br/> " +"油量: " + "<?php echo $row[oil]?>" + "<br/>" +"地址: " + "<?php echo $row[street]?>";var point = new BMap.Point(lon, lat);addMarker(point,<?php echo $row[carID] ?>,info);<?php}><!-- 计算两个点的中⼼点,并将其作为地图初始化时的中⼼位置-->var center = new BMap.Point(lon_center/2,lat_center/2);map.centerAndZoom(center, 17);map.enableScrollWheelZoom();</script></body></html>map.php⽂件主要是显⽰数据库⾥的两条信息,将这两条信息在地图上的相应的位置显⽰出来。
JS使用百度地图API自动获取地址和经纬度操作示例
JS使⽤百度地图API⾃动获取地址和经纬度操作⽰例本⽂实例讲述了JS使⽤百度地图API⾃动获取地址和经纬度操作。
分享给⼤家供⼤家参考,具体如下:在实际⼯作中我们经常会遇到这样的问题,但是当我们去看百度API的时候往往⼜达不到我们的要求。
故此,本篇博⽂讲述如何使⽤百度地图API⾃动获取地址和经纬度:1、HTML代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>点击地图获取地址和经纬度map,address,lng,lat</title><meta name="robots" content="noindex, nofollow"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!-- 将百度地图API引⼊,设置好⾃⼰的key --><script type="text/javascript" src="/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script></head><body><div class="main-div"><form method="post" action="" name="theForm" enctype="multipart/form-data" onsubmit="return validate()"><table cellspacing="1" cellpadding="3" width="100%"><tr><td class="label">经度</td><td><input type="text" name="lng" id="lng" value=""/></td></tr><tr><td class="label">纬度</td><td><input type="text" name="lat" id="lat" value=""/></td></tr><tr><td class="label">地址</td><td><input type='text' value='' name='sever_add' id='sever_add' readonly><input type='button' value='点击显⽰地图获取地址经纬度' id='open'></td></tr></table></form><div id='allmap' style='width: 50%; height: 50%; position: absolute; display: none'></div></div></body></html>2、JS代码如下<script type="text/javascript">function validate() {var sever_add = document.getElementsByName('sever_add')[0].value;if (isNull(sever_add)) {alert('请选择地址');return false;}return true;}//判断是否是空function isNull(a) {return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false;}document.getElementById('open').onclick = function () {if (document.getElementById('allmap').style.display == 'none') {document.getElementById('allmap').style.display = 'block';} else {document.getElementById('allmap').style.display = 'none';}}var map = new BMap.Map("allmap");var geoc = new BMap.Geocoder(); //地址解析对象var markersArray = [];var geolocation = new BMap.Geolocation();var point = new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 12); // 中⼼点geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);map.enableScrollWheelZoom(true);}else {alert('failed' + this.getStatus());}}, {enableHighAccuracy: true})map.addEventListener("click", showInfo);//清除标识function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注function addMarker(point) {var marker = new BMap.Marker(point);markersArray.push(marker);clearOverlays();map.addOverlay(marker);}//点击地图时间处理function showInfo(e) {document.getElementById('lng').value = e.point.lng;document.getElementById('lat').value = t;geoc.getLocation(e.point, function (rs) {var addComp = rs.addressComponents;var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; if (confirm("确定要地址是" + address + "?")) {document.getElementById('allmap').style.display = 'none';document.getElementById('sever_add').value = address;}});addMarker(e.point);}</script>将js代码放⼊到html中,我们可以得到效果图如下:更多关于JavaScript相关内容还可查看本站专题:《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。
js调用百度地图及调用百度地图的搜索功能
js调⽤百度地图及调⽤百度地图的搜索功能js调⽤百度地图的⽅法代码如下:<!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>Hello, World</title><style type="text/css">html{height: 100%;}body{height: 50%;margin: 0px;padding: 0px;}#container{width:600px;height: 500px;}</style><script type="text/javascript" src="/api?v=1.3"></script></head><body onload="loand()"><div id="container"></div><input id="lng" type="hidden" runat="server" /><input id="lat" type="hidden" runat="server" /><input id="Button1" type="button" value="标记图标" runat="server" onclick="getbiaoji()" /><script type="text/javascript">function getbiaoji() {var lng = document.getElementByIdx_x("lng").value;var lat = document.getElementByIdx_x("lat").value;var map = new BMap.Map("container");var point = new BMap.Point(lng, lat);var marker = new BMap.Marker(point);var opts = {width: 250, // 信息窗⼝宽度height: 100, // 信息窗⼝⾼度title: "经销商地址" // 信息窗⼝标题}var infoWindow = new Window("移动拖拽标记经销商地址:" + lng + lat, opts); // 创建信息窗⼝对象marker.enableDragging(); //启⽤拖拽map.addControl(new BMap.NavigationControl()); //左上⾓控件map.enableScrollWheelZoom(); //滚动放⼤map.enableKeyboard(); //键盘放⼤map.centerAndZoom(point, 13); //绘制地图map.addOverlay(marker); //标记地图map.openInfoWindow(infoWindow, map.getCenter());}function loand() {var map = new BMap.Map("container");var point = new BMap.Point(104.083, 30.686); //默认中⼼点var marker = new BMap.Marker(point);var opts = {width: 250, // 信息窗⼝宽度height: 100, // 信息窗⼝⾼度title: "经销商地址" // 信息窗⼝标题}var infoWindow = new Window("移动拖拽标记经销商地址", opts); // 创建信息窗⼝对象marker.enableDragging(); //启⽤拖拽marker.addEventListener("dragend", function (e) {point = new BMap.Point(e.point.lng, t); //标记坐标(拖拽以后的坐标)marker = new BMap.Marker(point);document.getElementByIdx_x("lng").value = e.point.lng;document.getElementByIdx_x("lat").value = t;infoWindow = new Window("当前位置<br />经度:" + e.point.lng + "<br />纬度:" + t, opts);map.openInfoWindow(infoWindow, point);})map.addControl(new BMap.NavigationControl()); //左上⾓控件map.enableScrollWheelZoom(); //滚动放⼤map.enableKeyboard(); //键盘放⼤map.centerAndZoom(point, 13); //绘制地图map.addOverlay(marker); //标记地图map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗⼝}</script></body></html>js调⽤百度地图搜索引⽤百度js Api<script type="text/javascript" src="/api?v=2.0&ak=xxxxxxxxxxxx"></script>创建地址解析器:var localSearch = null;//查询参数var options = {//智能搜索onSearchComplete: function (results) {//查询结果状态码if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) {var s = convertMapSearch(results); //对结果进⾏处理model.locationAddress(s); //将结果数据赋予knockout对象数组(可⽤其他数组对象代替)}}};localSearch = new BMap.LocalSearch("城市", options);结合knockout的textInput绑定⽅法和对象的subscribe属性,实现输⼊框变化实时查询功能。
GIS开发百度地图+Extjs
百度电子地图1.开发背景 (2)2.需求分析 (2)3.系统设计 (2)3.1系统功能结构 (2)3.2系统预览 (2)3.3开发环境 (5)4.各模块设计 (5)4.1模块实现关键代码 (5)5.总结 (7)6.参考资料 (7)1.开发背景随着城市发展,道路街道情况愈加复杂,实用、高效快速的电子地图应运而生。
电子地图可以非常方便的对普通地图的内容进行任意形式的要素组合、拼接,形成新的地图。
可以对电子地图进行任意比例尺、任意范围的绘图输出。
非常容易进行修改,缩短成图时间。
可以方便的与卫星影像、航空照片等其他信息源结合,生成新的图种。
本软件的开发为用户提供一款网络地图搜索服务,地图提供了普通搜索,周边搜索和视野内搜索三种方法,帮您迅速准确地找到您所需要的地点。
2.需求分析测量距离:能够测量地图任意位置之间的距离;区域缩放:能对拖拽绘制的矩形区域进行放大和缩小本地搜索:提供某一特定区域的位置收索服务;周边信息:根据搜索结果,获得周边信息的数据信息,并能根据需要自定义标注。
3.系统设计3.1系统功能结构3.3系统预览3.3.1系统界面电子地图测量距离区域缩放本地搜索标注信息3.3.2搜索功能3.3.3放大缩小点击地图左侧缩放标尺可以进行放大缩小操作3.3.4测距3.4开发环境IE 8.04.各模块设计4.1. 模块实现关键代码/*************************** 使用百度地图版本1.1 ***************************//* 创建和初始化地图 */function initializeMap(containerId){createMap(containerId); // 创建地图setMapTools(); // 设置地图工具setMapEvent(); // 设置地图事件addMapControl(); // 添加地图控件addMapListener(); // 添加地图事件监听器}/* 创建地图 */function createMap(containerId){var baiduMap = new BMap.Map(containerId);// 创建Map实例var point = new BMap.Point( 104.067923, 30.679943); //定义一个中心点坐标baiduMap.centerAndZoom( point, 12 ); //设定地图的中心点和缩放等级并将地图显示在地图容器中window.baiduMap = baiduMap;//将baiduMap设为全局变量}/* 设置地图事件 */function setMapEvent(){baiduMap.enableDragging();//启用地图拖拽事件,默认启用(可不写)baiduMap.enableScrollWheelZoom();//启用地图滚轮放大缩小baiduMap.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)baiduMap.enableKeyboard();//启用键盘上下左右键移动地图}/* 添加地图控件 */function addMapControl(){baiduMap.addControl(new BMap.MapTypeControl()); //添加地图类型控件baiduMap.addControl(new BMap.NavigationControl()); // 添加平移缩放控件baiduMap.addControl(new BMap.ScaleControl()); // 添加比例尺控件baiduMap.addControl(new BMap.OverviewMapControl()); // 添加缩略地图控件}/* 设置地图工具 */function setMapTools(){// 测距var distanceTool = new BMap.DistanceTool(baiduMap); window.distanceTool = distanceTool;// 标注var pushpinTool = new BMap.PushpinTool(baiduMap); window.pushpinTool = pushpinTool;// 右键菜单setContectMenu();}5.总结经过对开发的电子地图的测试,该地图已基本实现了需求中的基本功能。
百度地图JSAPI使用定位当前地址与路径规划
百度地图JSAPI使⽤定位当前地址与路径规划api实例地址样式 div1. <style>2. #allmap {width: 100%;height: 80%;overflow: hidden;margin:0;font-family:"微软雅⿊";}3. body{4. font-size: 12px;5. }6. </style>js1. <script type="text/javascript">2. // 百度地图API功能3. var map = new BMap.Map("allmap"); // 创建Map实例4. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中⼼点坐标和地图级别5. map.addControl(new BMap.NavigationControl());6. map.addControl(new BMap.ScaleControl());7. map.addControl(new BMap.OverviewMapControl());8. map.addControl(new BMap.MapTypeControl());9. map.setZoom(15);10. map.setCurrentCity("北京"); // 设置地图显⽰的城市此项是必须设置的11. map.enableScrollWheelZoom(true); //开启⿏标滚轮缩放12.13. var localp;14. var end = "<%=URLDecoder.decode(request.getParameter("haddr"),"utf-8")%>";15.16. var geolocation = new BMap.Geolocation();17. geolocation.getCurrentPosition(function(r){18. if(this.getStatus() == BMAP_STATUS_SUCCESS){19. var mk = new BMap.Marker(r.point);20. map.addOverlay(mk);21. map.panTo(r.point);22. localp = r.point;23. map.clearOverlays();24. search(localp,end,routePolicy[0]);25. }26. else {27. alert('定位失败!请确认您的浏览器开启了定位功能');28. }29. },{enableHighAccuracy: true})30.31. var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];32.33.34.35. function search(start,end,route){36. var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});37. driving.search(start,end);38. }39.40. </script>。
js实现百度地图同时显示多个路书效果
js实现百度地图同时显⽰多个路书效果本⽂介绍了js实现百度地图同时显⽰多个路书效果,主要是以⾃⾏车的还车地点作为实例,具体代码如下:启动路书:<script type="text/javascript" src="/api?v=2.0&ak=⾃⼰的ak"></script><script type="text/javascript" src="js/lushu.js"></script><!--路书 -->var BMapLib = window.BMapLib = BMapLib || {};(function() {var b, a = b = a || {version : "1.5.0"};a.guid = "$BAIDU$";(function() {window[a.guid] = window[a.guid] || {};a.dom = a.dom || {};a.dom.g = function(e) {if ("string" == typeof e || e instanceof String) {return document.getElementById(e)} else {if (e && e.nodeName && (e.nodeType == 1 || e.nodeType == 9)) {return e}}return null};a.g = a.G = a.dom.g;ng = ng || {};ng.isString = function(e) {return "[object String]" == Object.prototype.toString.call(e)};a.isString = ng.isString;a.dom._g = function(e) {if (ng.isString(e)) {return document.getElementById(e)}return e};a._g = a.dom._g;a.dom.getDocument = function(e) {e = a.dom.g(e);return e.nodeType == 9 ? e : e.ownerDocument || e.document};a.browser = a.browser || {};a.browser.ie = a.ie = /msie (\d+\.\d+)/i.test(erAgent) ? (document.documentMode || +RegExp[" 241"]): undefined;a.dom.getComputedStyle = function(f, e) {f = a.dom._g(f);var h = a.dom.getDocument(f), g;if (h.defaultView && h.defaultView.getComputedStyle) {g = h.defaultView.getComputedStyle(f, null);if (g) {return g[e] || g.getPropertyValue(e)}}return ""};a.dom._styleFixer = a.dom._styleFixer || {};a.dom._styleFilter = a.dom._styleFilter || [];a.dom._styleFilter.filter = function(f, j, k) {for (var e = 0, h = a.dom._styleFilter, g; g = h[e]; e++) {if (g = g[k]) {j = g(f, j)}}return j};a.string = a.string || {};a.string.toCamelCase = function(e) {if (e.indexOf("-") < 0 && e.indexOf("_") < 0) {return e}return e.replace(/[-_][^-_]/g, function(f) {return f.charAt(1).toUpperCase()})};a.dom.getStyle = function(g, f) {var i = a.dom;g = i.g(g);f = a.string.toCamelCase(f);var h = g.style[f] || (g.currentStyle ? g.currentStyle[f] : "")|| i.getComputedStyle(g, f);if (!h) {var e = i._styleFixer[f];if (e) {h = e.get ? e.get(g) : a.dom.getStyle(g, e)}}if (e = i._styleFilter) {h = e.filter(f, h, "get")}return h};a.getStyle = a.dom.getStyle;a.dom._NAME_ATTRS = (function() {var e = {cellpadding : "cellPadding",cellspacing : "cellSpacing",colspan : "colSpan",rowspan : "rowSpan",valign : "vAlign",usemap : "useMap",frameborder : "frameBorder"};if (a.browser.ie < 8) {e["for"] = "htmlFor";e["class"] = "className"} else {e.htmlFor = "for";e.className = "class"}return e})();a.dom.setAttr = function(f, e, g) {f = a.dom.g(f);if ("style" == e) {f.style.cssText = g} else {e = a.dom._NAME_ATTRS[e] || e;f.setAttribute(e, g)}return f};a.setAttr = a.dom.setAttr;a.dom.setAttrs = function(g, e) {g = a.dom.g(g);for ( var f in e) {a.dom.setAttr(g, f, e[f])}return g};a.setAttrs = a.dom.setAttrs;a.dom.create = function(g, e) {var h = document.createElement(g), f = e || {};return a.dom.setAttrs(h, f)};a.object = a.object || {};a.extend = a.object.extend = function(g, e) {for ( var f in e) {if (e.hasOwnProperty(f)) {g[f] = e[f]}}return g}})();var c = BMapLib.LuShu = function(g, f, e) {if (!f || f.length < 1) {return}this._map = g;this._path = f;this.i = 0;this._setTimeoutQuene = [];this._projection = this._map.getMapType().getProjection(); this._opts = {icon : null,speed : 4000,defaultContent : ""};this._setOptions(e);this._rotation = 0;if (!this._opts.icon instanceof BMap.Icon) {this._opts.icon = defaultIcon}};c.prototype._setOptions = function(e) {if (!e) {return}for ( var f in e) {if (e.hasOwnProperty(f)) {this._opts[f] = e[f]}}};c.prototype.start = function() {var f = this, e = f._path.length;if (f.i && f.i < e - 1) {if (!f._fromPause) {return} else {if (!f._fromStop) {f._moveNext(++f.i)}}} else {f._addMarker();f._timeoutFlag = setTimeout(function() {f._addInfoWin();if (f._opts.defaultContent == "") {f.hideInfoWindow()}f._moveNext(f.i)}, 400)}this._fromPause = false;this._fromStop = false}, c.prototype.stop = function() {this.i = 0;this._fromStop = true;clearInterval(this._intervalFlag);this._clearTimeout();for (var g = 0, f = this._ndmarkPois, e = f.length; g < e; g++) { f[g].bShow = false}};c.prototype.pause = function() {clearInterval(this._intervalFlag);this._fromPause = true;this._clearTimeout()};c.prototype.hideInfoWindow = function() {this._overlay._div.style.visibility = "hidden"};c.prototype.showInfoWindow = function() {this._overlay._div.style.visibility = "visible"};a.object.extend(c.prototype,{_addMarker : function(f) {if (this._marker) {this.stop();this._map.removeOverlay(this._marker);clearTimeout(this._timeoutFlag)}this._overlay&& this._map.removeOverlay(this._overlay);var e = new BMap.Marker(this._path[0]);this._opts.icon && e.setIcon(this._opts.icon);this._map.addOverlay(e);e.setAnimation(BMAP_ANIMATION_DROP);this._marker = e},_addInfoWin : function() {var f = this;var e = new d(f._marker.getPosition(),f._opts.defaultContent);e.setRelatedClass(this);this._overlay = e;this._map.addOverlay(e)},_getMercator : function(e) {return this._map.getMapType().getProjection().lngLatToPoint(e)},_getDistance : function(f, e) {return Math.sqrt(Math.pow(f.x - e.x, 2)+ Math.pow(f.y - e.y, 2))},_move : function(n, j, m) {var i = this, h = 0, e = 10, f = this._opts.speed/ (1000 / e), l = this._projection.lngLatToPoint(n), k = this._projection.lngLatToPoint(j), g = Math.round(i._getDistance(l, k)/ f);if (g < 1) {i._moveNext(++i.i);return}i._intervalFlag = setInterval(function() {if (h >= g) {clearInterval(i._intervalFlag);if (i.i > i._path.length) {return}i._moveNext(++i.i)} else {h++;var o = m(l.x, k.x, h, g), r = m(l.y, k.y, h, g), q = i._projection.pointToLngLat(new BMap.Pixel(o, r));if (h == 1) {var p = null;if (i.i - 1 >= 0) {p = i._path[i.i - 1]}if (i._opts.enableRotation == true) {i.setRotation(p, n, j)}if (i._opts.autoView) {if (!i._map.getBounds().containsPoint(q)) {i._map.setCenter(q)}}}i._marker.setPosition(q);i._setInfoWin(q)}}, e)},setRotation : function(l, f, m) {var j = this;var e = 0;f = j._map.pointToPixel(f);m = j._map.pointToPixel(m);if (m.x != f.x) {var k = (m.y - f.y) / (m.x - f.x), g = Math.atan(k);e = g * 360 / (2 * Math.PI);if (m.x < f.x) {e = -e + 90 + 90} else {e = -e}j._marker.setRotation(-e)} else {var h = m.y - f.y;var i = 0;if (h > 0) {i = -1} else {i = 1}j._marker.setRotation(-i * 90)}return},linePixellength : function(f, e) {return Math.sqrt(Math.abs(f.x - e.x)* Math.abs(f.x - e.x) + Math.abs(f.y - e.y)* Math.abs(f.y - e.y))},pointToPoint : function(f, e) {return Math.abs(f.x - e.x) * Math.abs(f.x - e.x)+ Math.abs(f.y - e.y) * Math.abs(f.y - e.y)},_moveNext : function(e) {var f = this;if (e < this._path.length - 1) {f._move(f._path[e], f._path[e + 1],f._tween.linear)}},_setInfoWin : function(g) {var f = this;if (!f._overlay) {return}f._overlay.setPosition(g, f._marker.getIcon().size); var e = f._troughPointIndex(g);if (e != -1) {clearInterval(f._intervalFlag);f._overlay.setHtml(f._ndmarkPois[e].html);f._overlay.setPosition(g,f._marker.getIcon().size);f._pauseForView(e)} else {f._overlay.setHtml(f._opts.defaultContent)}},_pauseForView : function(e) {var g = this;var f = setTimeout(function() {g._moveNext(++g.i)}, g._ndmarkPois[e].pauseTime * 1000);g._setTimeoutQuene.push(f)},_clearTimeout : function() {for ( var e in this._setTimeoutQuene) {clearTimeout(this._setTimeoutQuene[e])}this._setTimeoutQuene.length = 0},_tween : {linear : function(f, j, h, i) {var e = f, l = j - f, g = h, k = i;return l * g / k + e}},_troughPointIndex : function(f) {var h = this._ndmarkPois, j;for (var g = 0, e = h.length; g < e; g++) {if (!h[g].bShow) {j = this._map.getDistance(new BMap.Point(h[g].lng, h[g].lat), f);if (j < 10) {h[g].bShow = true;return g}}}return -1}});function d(e, f) {this._point = e;this._html = f}d.prototype = new BMap.Overlay();d.prototype.initialize = function(e) {var f = this._div = a.dom.create("div",{style : "border:solid 1px #ccc;width:auto;min-width:50px;text-align:center;position:absolute;background:#fff;color:#000;font-size:12px;border-radius: 10px;padding:5px;white-space: nowrap;" });f.innerHTML = this._html;e.getPanes().floatPane.appendChild(f);this._map = e;return f};d.prototype.draw = function() {this.setPosition(this.lushuMain._marker.getPosition(),this.lushuMain._marker.getIcon().size)};a.object.extend(d.prototype, {setPosition : function(h, i) {var f = this._map.pointToOverlayPixel(h), e = a.dom.getStyle(this._div, "width"), g = a.dom.getStyle(this._div, "height");overlayW = parseInt(this._div.clientWidth || e, 10),overlayH = parseInt(this._div.clientHeight || g, 10);this._div.style.left = f.x - overlayW / 2 + "px";this._div.style.bottom = -(f.y - i.height) + "px"},setHtml : function(e) {this._div.innerHTML = e},setRelatedClass : function(e) {this.lushuMain = e}})})();function showallrecord(starttime,endtime){//显⽰多条开始结束时间之间的⾃⾏车路书var bikeId=null;$.getJSON("./GetBickIdServlet",function(json){bikeId = json;//所有⾃⾏车编号});var json={"StartTime":starttime,//开始时间"EndTime":endtime//结束时间};//创建⼆维数组,例如pointArray[i]中i⾃⾏车编号,pointArray[i][j]为编号为i的⾃⾏车的所有借还站点信息$.getJSON("./GetAllRecordServlet",{json:JSON.stringify(json)},function(json){var j = 0;var stationlonlist=new Array();var stationlatlist=new Array();var pointArray=new Array();var bikeIdlist = new Array();for(var i = 0; i < bikeId.length; i++){stationlonlist[i] = new Array();stationlatlist[i] = new Array();pointArray[i] = new Array();bikeIdlist[i] = bikeId[i].BikeId;}var tt = json.length < 200?json.length:200;//如果查询出来的⾃⾏车借还站点记录多于200条,则显⽰200条。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
double z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
double mgLat = lat + dLat;
double mgLon = lon + dLon;
double[] loc = { mgLat, mgLon };
return loc;
ret += (20.0 * Math.sin(6.0 * lat * pi) + 20.0 * Math.sin(2.0 * lat * pi)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(lon * pi) + 40.0 * Math.sin(lon / 3.0 * pi)) * 2.0 / 3.0;最全面的地图JavaScript离线版开发
项目要求web版地图要离线开发。这里总结下自己的开发过程和经验。
大概需求是:每辆车上安装有公司接收机,会实时反馈车辆的坐标网络,所以要求离线开发。
此过程主要有三个技术点:
double[] gcj2bd = gcj2bd(wgs2gcj[0], wgs2gcj[1]);
return gcj2bd;
}/*** GCJ坐标转坐标* @param lat
* @param lon
* @return
*/
public static double[] gcj2bd(double lat, double lon) {
double lonNew=lonD+lonM/60;
return new double[] { latNew, lonNew } ;
}
}
double latM=Double.parseDouble(lat.substring(2));
double latNew=latD+latM/60;
double lonD=Double.parseDouble(lon.substring(0, 3));
double lonM=Double.parseDouble(lon.substring(3));
4)书写js代码
<script type="text/javas new BMap.Map("map_demo"); //创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 8); //初始化地图,设置中心点坐标和地图级别
};js中的tiles_dir
3.参考demo编写代码,要点如下:
1)只需要加载load文件
<script type="text/javasne_v2_load.js"></script>
ret += (160.0 * Math.sin(lon / 12.0 * pi) + 320 * Math.sin(lon * pi/ 30.0)) * 2.0 / 3.0;
return ret;
}
private static double transformLon(double lat, double lon) {
//圆周率转换量
public final static double x_pi = 3.14159265358979324 * 3000.0 / 180.0;
public static double[] wgs2bd(double lat, double lon){
double[] wgs2gcj = wgs2gcj(lat, lon);
double x = lon, y = lat;
double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
2)加载css文件(貌似可不需要)
<link rel="stylesheet" type="text/cssv2.css"/>
3)定义个放置地图的容器,并用css控制高度和宽度
<div id="map_demo"></div>
* @return
*/
public static double[] wgs2gcj(double lat, double lon) {
double dLat = transformLat(lon - 105.0, lat - 35.0);
double dLon = transformLon(lon - 105.0, lat - 35.0);
double radLat = lat / 180.0 * pi;
double magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
double sqrtMagic = Math.sqrt(magic);
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
double gg_lon = z * Math.cos(theta);
double gg_lat = z * Math.sin(theta);
return new double[] { gg_lat, gg_lon };
}
/**
* WGS坐标转GCJ坐标
* @paபைடு நூலகம்am lat
* @param lon
使用方法:
复制代码
1.确定你用的瓦片js中的imgext
var bdmapcfg = {
'imgext':'.jpg', //瓦片图的后缀------根据需要修改,一般是.png .jpg
'tiles_dir':'et += (20.0 * Math.sin(lat * pi) + 40.0 * Math.sin(lat / 3.0 * pi)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(lat / 12.0 * pi) + 300.0 * Math.sin(lat / 30.0 * pi)) * 2.0 / 3.0;
复制代码
public class CoorConvertUtil {
//圆周率
static double pi = 3.14159265358979324;
//卫星椭球坐标投影到平面坐标系的投影因子
static double a = 6378245.0;
//椭球的偏心率
static double ee = 0.00669342162296594323;
double bd_lon = z * Math.cos(theta) + 0.0065;
double bd_lat = z * Math.sin(theta) + 0.006;
return new double[] { bd_lat, bd_lon };
}
public static double[] bd2gcj(double lat, double lon) {
//map.addControl(new BMap.MapTypeControl()); //添加地图类型控件离线只支持电子地图,卫星/三维不支持
//map.setCurrentCity("北京"); //设置地图显示的城市离线地图不支持!!
enableScrollWheelZoom(true); //开启鼠标滚轮缩放
return ret;
}
/**
*度分转度
* @param lat纬度ddmm.mmmm
* @param lon经度dddmm.mmmm
* @return
*/
public static double[] dufen2du(String lat, String lon){
double latD=Double.parseDouble(lat.substring(0, 2));
map.addControl(new BMap.NavigationControl()); //缩放按钮
</script>
复制代码
2.获取瓦片图
这里可以参考:/smzd/blog/619397
当然网上也有下载工具,比如:全能电子地图下载器
3全做了特殊处理。其Web服务API中提供了坐标转换API,但是它是以HTTP形式提供的坐标转换接口,所以说还是无法脱离网络。这里通过一些专业的知识将WGS坐标转GCJ,再将GCJ坐标转BD坐标,经验证精确度几乎算很准确的了。
double ret = 300.0 + lat + 2.0 * lon + 0.1 * lat * lat + 0.1 * lat * lon + 0.1 * Math.sqrt(Math.abs(lat));
ret += (20.0 * Math.sin(6.0 * lat * pi) + 20.0 * Math.sin(2.0 * lat * pi)) * 2.0 / 3.0;