制作百度地图离线JavaScript API加载本地瓦片地图_百度地图开发平台中瓦片图api在哪里-程序员宅基地

技术标签: java  地图  百度地图API  javascript  离线地图  

原文地址为: 制作百度地图离线JavaScript API加载本地瓦片地图

1.首先获取百度 JavaScript API

首先用浏览器打开 http://api.map.baidu.com/api?v=1.3 如下图所示

其中 http://api.map.baidu.com/getscript?v=1.3&key=&services=&t=20121108061854 这个链接就是我们要找的API文件,

同样在浏览器中打开它,并另存为诸如“apiv1.3.min.js”

还有百度地图必须的一些控件,光标,logo之类的图片也下载下来

2.修改“apiv1.3.min.js”把里面的地图控件的图片,光标,logo等链接替换成本地的。

3.下载百度地图瓦片,这个有很多方法可以获取。比如这个工具:MaptileDownloader

4.开始使用离线地图api加载本地的地图切片

现在,完全可以脱离网络使用百度地图了。示例源码如下:

 1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>百度离线地图演示</title>
7 <script type="text/javascript" src="js/apiv1.3.min.js"></script>
8 <script type="text/javascript" src="js/map,oppc,navictrl,tile,copyrightctrl"></script>
9 <!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->
10 <link rel="stylesheet" type="text/css" href="bmap.css" />
11 </head>
12
13 <body>
14 <div style="left:0;top:0;width:100%;height:100%;position:absolute;" id="container"></div>
15 </body>
16
17 </html>
18 <script type="text/javascript">
19 var tileLayer = new BMap.TileLayer({
20 isTransparentPng: true
21 });
22 tileLayer.getTilesUrl = function (tileCoord, zoom) {
23 var x = tileCoord.x;
24 var y = tileCoord.y;
25 return 'maptile/' + zoom + '/' + x + '/' + y + '.png';
26 }
27
28 var map = new BMap.Map('container');
29 map.addTileLayer(tileLayer);
30 map.addControl(new BMap.NavigationControl());
31 map.centerAndZoom(new BMap.Point(100.675, 39.007978), 5);
32 map.enableScrollWheelZoom(); //启用滚轮放大缩小
33 map.enableKeyboard(); //启用键盘操作,默认禁用。键盘的上、下、左、右键可连续移动地图。
34 map.enableContinuousZoom();//启用连续缩放效果
35
36 var copyCtrl = new BMap.CopyrightControl({
37 anchor: BMAP_ANCHOR_BOTTOM_RIGHT
38 });
39 copyCtrl.addCopyright({
40 id: 1,
41 content: "http://maptiledownloader.googlecode.com 百度离线地图演示"
42 });
43 map.addControl(copyCtrl);
44 </script>

 

 


转载请注明本文地址: 制作百度地图离线JavaScript API加载本地瓦片地图
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/linjcai/article/details/81458121

智能推荐

PHP5.6版本安装redis扩展_php5.6 redis-程序员宅基地

文章浏览阅读974次。https://blog.csdn.net/qq_37655695/article/details/79026236windows下安装和自启动redis服务器https://blog.csdn.net/drdairen/article/details/50952798_php5.6 redis

vscode调试C/C++程序_c/c++ intellisense, debugging, and code browsing.-程序员宅基地

文章浏览阅读3.8k次,点赞2次,收藏20次。这里写自定义目录标题准备工作安装vscode的安装MingW安装配置配置环境变量vscode配置最后的配置开始调试舒服了。。。准备工作下载vscodemingw和mingw-w64是有区别的,直观的说,mingw-w64更加强大,推荐使用离线版mingw-w64下载地址mingw-w64离线版下载地址安装vscode的安装MingW安装下载离线版安装包,直接解压即可..._c/c++ intellisense, debugging, and code browsing.

教你如何用 Paddle.js 开发智能化微信小程序-程序员宅基地

文章浏览阅读753次。此文转载自:https://my.oschina.net/u/4067628/blog/4519276大咖揭秘Java人都栽在了哪?点击免费领取《大厂面试清单》,攻克面试难关~>>>早在今年5月百度飞桨联手百度APP技术团队开源了飞桨前端推理引擎Paddle.js,一时间国内Web开发的小伙伴们欢欣鼓舞,毕竟是国内首个开源的机器学习Web在线预测方案。GitH..._paddlejs ocr初始化报错

fgets用法:char *fgets( char *str, int num, FILE *stream );_char fgets-程序员宅基地

文章浏览阅读89次。#include <stdio.h>int main(void){ //逐个取出user.txt文件内的字符串,并且打印 FILE * file; char line[128]; char * ret; file = fopen("users.txt", "r"); if(!file){ printf("文件打开错误"); return 1; } while(ret = fgets(line, sizeof(line), file)){ /._char fgets

安装kali Linux 2018.2以后的事_kali linux2018..2-程序员宅基地

文章浏览阅读4.3k次。一、添加更新源:leafpad /etc/apt/sources.list二、添加源阿里云 deb http://mirrors.aliyun.com/kali kali-rolling main non-free contrib deb-src http://mirrors.aliyun.com/kali kali-rolling main non-free contrib..._kali linux2018..2

Ubuntu14.04安装libfreenect2使用kinect2-程序员宅基地

文章浏览阅读6.3k次。kinect2出来时OpenNI已被水果公司收购,第三方的驱动支持只剩下libfreenect2了。

随便推点

欧拉公式改进(Euler2)_证明改进的euler公式是二阶方法-程序员宅基地

文章浏览阅读518次。import matplotlib.pyplot as pltimport numpy as npxx=np.zeros(100)yy=np.zeros(100)x=0y=1t=0.1i=1for i in range(100): k=y-2*x/y x=x+t y1=y+t*k k1=y1-2*x/y1 y=y+t*(k+k1)/2 print(x,y) xx[i]=x yy[i]=yplt.plot(xx,yy)0._证明改进的euler公式是二阶方法

Python快速编程入门课后习题答案_8、在函数定义的前面添加装饰器名和_@____符号,实现对该函数使用装饰器。-程序员宅基地

文章浏览阅读1.8w次,点赞15次,收藏56次。文章目录前言第一章一、填空题二、判断题三、选择题四、简答题第二章一、填空题二、判断题三、选择题四、简答题第三章一、填空题二、判断题三、选择题四、简答题第四章一、单选题二、判断题三、填空题四、程序分析题第五章一、选择题二、判断题三、填空题四、简答题五、程序分析题第六章一、单选题二、判断题三、填空题四、简答题五、程序分析题第七章一、..._8、在函数定义的前面添加装饰器名和_@____符号,实现对该函数使用装饰器。

Oracle技术分享系列一:Oracle数据库学习资源推荐_oracle学习资料-程序员宅基地

文章浏览阅读1k次。Oracle 作为一个技术大厂为其员工和用户提供了大量的免费学习资源。虽然有人说,Oracle有什么新技术也从来都不发论文,对科技的发展贡献十分有限。但其实Oracle的很多技术实现都明明白白地写在官方技术文档里。而且所有学习者都可以免费试用Oracle数据库的所有功能,还有丰富的技术社区、邮件组,散落在各地的热心的用户组,甚至是专门的回答各种问题的由大师组成的ASK TOM团队回答你的的各种问题,可以说对学习者是相当友好的了。..._oracle学习资料

window.history.back(); 缓存 返回上级页面不刷新数据-程序员宅基地

文章浏览阅读1.2w次,点赞6次,收藏5次。问题我们经常会做完一个操作之后返回上一个页面(比如新增完一条记录)然后我们希望返回上一个页面的时候就自动刷新他。但是由于JS的缓存机制导致我们的数据还是从前一次里面取的(他的初衷是希望你更快,更省资源)但是和我们的需求不同如图:探索从网上找的一些资料:在window.history.back(); 后面加location.reload();win..._window.history.back

hadoop-2.7.2伪分布式windows安装及配置_此时不应有hadoop-2.7.2\bin-程序员宅基地

文章浏览阅读312次。hadoop-2.7.2伪分布式windows安装及配置首先准备hadoop-2.7.2压缩包将复制好的压缩包解压至D盘的soft文件夹下,修改名字为hadoop使用winutils中的bin目录整个替换hadoop中的bin目录在hadoop的data文件夹下创建datanode及namenode文件夹,用来保存节点信息JDK1.8安装路径环境配置![在这里插入图片描述](https://img-blog.csdnimg.cn/20210118172546609.png?x-oss-process=ima_此时不应有hadoop-2.7.2\bin

File类总结_filecsnd-程序员宅基地

文章浏览阅读284次。最近一直在忙项目,所以没有及时更新小知识,今天就为大家讲一下file的知识点。首先呢,我们需要了解文件路径的概念。文件路径就是文件在电脑中的位置,表示文件路径的方式有两种:相对路径和绝对路径。相对路径是指目标相对于当前文件的路径,例如:“./index.html”。绝对路径:从盘符开始的路径或者网址的全路径,例如“C:\windows\system32\cmd.exe”或者“https://blo..._filecsnd

推荐文章

热门文章

相关标签