随州北京网站建设,网络营销的目的和意义,什么网站可以推广广告,wordpress推广码点此直接下载完整版Demo代码
先准备好一个放置源码的文件夹#xff0c;然后将获取的文件放进去。建立三个文件夹#xff1a;js、css、images。
第一步#xff0c;自然是访问一个入口#xff1a;http://api.map.baidu.com/api?v1.3
里面的内容是这样的#xff08;原本没…点此直接下载完整版Demo代码
先准备好一个放置源码的文件夹然后将获取的文件放进去。建立三个文件夹js、css、images。
第一步自然是访问一个入口http://api.map.baidu.com/api?v1.3
里面的内容是这样的原本没有换行为了阅读方便一点加了两个回车
(function(){ window.BMap_loadScriptTime (new Date).getTime();
document.write(script typetext/javascript src
document.write(link relstylesheet typetext/css hrefhttp://api.map.baidu.com/res/13/bmap.css/);})();
这一步将获得一个js文件的位置和一个css文件的未知然后分别下载下来放在准备好的文件夹里面我分别存储在/js和/css里面。js的路径后面有若干参数不管下载下来的文件重新命名就好比如叫做apiv1.3.min.js
接下来要修改这个js中的一点代码了。由于代码是压缩在一行上的因此修改起来有点麻烦。 搜索变量“imgPath”直到找到一段代码同样加了一个回车
var xm?https://sapi.map.baidu.com/:http://api.map.baidu.com/;
var cd{imgPath:ximages/,cityNames:{\u5317\u4eac:bj,
把imgPath:ximages/中的x去掉即可这样就变成了跟网络地址无关的相对位置了。这里指出的images文件夹是与将来的html文件夹平行的目录里面的。 2. 搜索变量“_baseUrl”直到找到这样的一段代码这个比较简单
preLoaded:{},Config:{_baseUrl:xgetmodules?v1.3,_timeout:5000},
同样要去掉x这个x也是前面这段代码中的x。同时不仅要去掉x更要把地址指向js目录。
preLoaded:{},Config:{_baseUrl:js/,_timeout:5000},
这个地址用来动态加载组件。系统中用到哪些组件就下载加载哪些组件。最终系统会访问类似于“http://api.map.baidu.com/getmodules?v1.3modmap,oppc,tile,control,marker”的url加载组件。
下面会看到我更直接的把加载地址都写死了。看第三步
继续搜索下一个“_baseUrl”得到下面的代码
window.setTimeout(function(){var cPcN.Config._baseUrlmodcN.Module._arrMdls.join(,);cy.request(cP);cN.Module._arrMdls.length0;cN.delayFlagfalse},1)
直接修改cP变量吧写死好了我就是这样做的
var cPcN.Config._baseUrlgetmodules.js;cy.request(cP);
这样我们把动态加载编程手动加载了。我们访问这个地址“http://api.map.baidu.com/getmodules?v1.3modmap,oppc,tile,control,marker”就可以拿到一个js文件了。把它重命名为上面指定的“getmodules.js”丢在js文件夹里面即可。
如果需要更多的功能也不需要自动加载反正都是本地的另外配置参数获取相关的功能就好了。
3. 关键的一步也是最复杂的一步搜索“getTilesUrl”直到找到这样的一段参照物也可以另选比如“BMAP_NORMAL_MAP”
if(this.map.highResolutionEnabled()){cPph}var cMj[Math.abs(cRcO)%j.length]?qttilex(cR).replace(/-/gi,M)y(cO).replace(/-/gi,M)zcQstylescP(a9.browser.ie6?color_dep32colors50:)udtT;return cM.replace(/-(\d)/gi,M$1)};window.BMAP_NORMAL_MAP
这段代码这么长我格式化一下来看好了代码截取比上面更长一些 aU.getTilesUrl function(cN, cQ) {var cR cN.x;var cO cN.y;var T 20150518;var cP pl;if (this.map.highResolutionEnabled()) {cP ph}var cM j[Math.abs(cR cO) % j.length] ?qttilex (cR ).replace(/-/gi, M) y (cO ).replace(/-/gi, M) z cQ styles cP (a9.browser.ie 6 ? color_dep32colors50 : ) udt T;return cM.replace(/-(\d)/gi, M$1)};window.BMAP_NORMAL_MAP new cv(\u5730\u56fe, aU, {tips : \u663e\u793a\u666e\u901a\u5730\u56fe});
说一下“getTilesUrl”这个方法这里就是返回瓦片未知的关键方法。两个参数中第一个参数是{xy}第二个参数就是z这样xyz就都有了。
来个短路吧直接把它计算出来的cM的结果重新计算一下改成 //这个地方废弃了上面的计算结果直接采用本地图片cM tiles/ cQ / cR / cO .jpg;
这里意味着我们要建立第四个文件夹tiles了。这个文件夹里面的内容和后面的资源文件请在附件中下载。至于如何下载瓦片请自行百度吧。
OK了这个文件的处理就结束了。
第二步下载图片等资源文件。
这个过程很好办查找bmap.css里面所有的图片文件下载下来放在指定的文件夹里面就好了。里面总共不超过两三个文件下载下来放在images文件夹里面就行了。另外刚才的这个js里面也有一些资源文件也下载下来放在images文件夹里面。这个通过搜索imgPath就能找到有png有gif有点文件可能需要通过https的地址才能下载的到。 第三步写demo.html吧。这个直接贴代码。
!DOCTYPE html
html
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title百度离线版DEMO/title
script typetext/javascript srcjs/apiv1.3.min.js/script
!--script typetext/javascript srchttp://api.map.baidu.com/api?v1.3/script--
link relstylesheet typetext/css hrefcss/bmap.css/
/head
body
div stylewidth:520px;height:340px;border:1px solid gray idcontainer/div
/body
/html
script typetext/javascript
var map new BMap.Map(container,{mapType: BMAP_NORMAL_MAP}); //设置卫星图为底图
var point new BMap.Point(111.404, 40.915); // 创建点坐标
map.centerAndZoom(point,5); // 初始化地图,设置中心点坐标和地图级别。//map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
//map.setCurrentCity(北京); // 设置地图显示的城市 此项是必须设置的
var marker new BMap.Marker(point);
map.addOverlay(marker);
/script
效果图 补记
由于这个离线版的百度地图对IE支持不佳现在已经查明原因在于图片的格式和声明上。百度提供的tiles图片声称都是jpg格式的但图片实际是png格式的因此在IE下面就死板的认为要用jpg解码结果无法解析。但IE对于网络的图片则按照实际的内容进行区分和解析这个是没问题的因为图片在网上完全可能是动态的比如authcode.do之类的就没有扩展名只说。看起来这是IE的问题了。
这样看来解决这个问题就好办了更改文件扩展名
这个可以通过cmd命令来完成。比如我的命令就是
for /F %i in (dir /A:D /S /B) do copy %i\*.jpg %i\*.png
之所以用了拷贝而不是直接重命名还是想保留原文件。
这样前面第三步把扩展名改为“.png”就ok了。
