最全面的百度地图JavaScript离线版开发

合集下载

webview与javascript交互并调用baidu地图服务(内部资料)

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 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添加按钮点击切换卫星地图和街道地图

离线百度地图,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应用开发

离线地图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中文开发文档

百度地图Baidu Map API中文开发文档
地图操作 _______________________________________________________________ 6
控件 _______________________________________________________________7
地图控件概述 ___________________________________________________________ 7 向地图添加控件 _________________________________________________________ 7 控制控件位置 ___________________________________________________________ 8 修改控件配置 ___________________________________________________________ 8 自定义控件 _____________________________________________________________ 8
定义标注图标 _________________________________________________________________ 10 监听标注事件 _________________________________________________________________ 11 可托拽的标注 _________________________________________________________________ 11 内存释放 _____________________________________________________________________ 12

百度地图API使用(JS案例Web服务器案例)

百度地图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(坐标)对象,把标注添加到坐标位置。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
double x = lon - 0.0065, y = lat - 0.006;
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/css&#v2.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;
相关文档
最新文档