js使用百度离线地图

由于客户方只有内网部署，要求使用离线地图，所以这里使用百度离线地图，整体效果如下：

跟线上地图区别不大，可以精确到街道地址，完全符合客户需求，详解操作步骤：

获取百度 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文件，如下图

全选复制，并保存为js文件（如：amap.min.js），离线地图demo展示如下

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>百度离线地图演示</title><script type="text/javascript" src="js/amap.min.js"></script>
<!--  <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>-->
</head><body>
<div style="left:0;top:0;width:100%;height:100%;position:absolute;" id="container"></div>
</body></html>
<script type="text/javascript">var tileLayer = new BMap.TileLayer({isTransparentPng: true});tileLayer.getTilesUrl = function (tileCoord, zoom) {var x = tileCoord.x;var y = tileCoord.y;return 'maptile/' + zoom + '/' + x + '/' + y + '.png';}var map = new BMap.Map('container');var point = new BMap.Point(116.404, 39.915)map.centerAndZoom(point, 15);var marker = new BMap.Marker(point);        // 创建标注map.addOverlay(marker);map.addTileLayer(tileLayer);map.addControl(new BMap.NavigationControl());map.centerAndZoom(new BMap.Point(100.675, 39.007978), 5);map.enableScrollWheelZoom();  //启用滚轮放大缩小map.enableKeyboard();       //启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图。map.enableContinuousZoom();//启用连续缩放效果var copyCtrl = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT})map.addControl(copyCtrl);
</script>

瓦片下载地址：http://www.wmksj.com/map.html 需注册（免费）

js使用百度离线地图相关推荐

QT实现加载百度离线地图
在Qt中加载百度地图需要用到网络浏览器,在此采用webEngine模块,然后用webchannel进行qt与HTML/JavaScript的交互. 需求描述:软件加载百度地图,用鼠标在地图上选点,并进 ...
百度离线地图开发，node实现地图瓦片下载
最近有个Web项目要用离线地图,项目是在内网环境,找了很多资料,踩了很多坑,好在已经实现了,下面把资料整理一下. 首先是百度离线地图开发包,原文地址是http://www.xiaoguo123.com ...
web百度离线地图开发（详细教程）2019
web百度离线地图开发(详细教程) 需求情景主要参考开发步骤一.JS API文件下载二.修改API文件 1.屏蔽ak验证 2.设置引用本地资源路径 3.下载本地资源 4.引用本地资源三.加载 ...
如何用百度离线API调用百度离线地图
这里以广西南宁市为例,说明如何用百度离线API调用百度离线地图. 首先,点击视图左上方的地图类型按钮选择百度地图(如果没有该项请点击"更多"选项),然后在视图右上方选择广西省南宁市 ...
百度离线地图示例之三：矢量图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
vue2+百度离线地图实现多车辆行驶动态轨迹
vue2+百度离线地图实现行驶多车辆动态轨迹实现多多车辆实时轨迹监控,每个10秒监测一次接口,进行动态追加.(前端实现,如果数量庞大的车辆移动,很消耗性能) 百度离线地图引入方法查看: vue项目实 ...
百度离线地图示例之四：热力图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
百度离线地图示例之二：测距
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
vue整合百度离线地图api3.0
文章目录前言一.场景二.操作步骤 1.引入3.0js文件 2.创建map_load.js 3.修改bmap_offline_api_v3.0_min.js文件 3.1屏蔽ak验证 3.2加载mo ...
Qt之加载百度离线地图（WebKit和WebEngine）
最近翻看进年前写了一篇关于百度离线地图的博客:Qt加载百度离线地图,发现存在很多问题,比如不能加载折线等图形覆盖物:只支持QtWebKit,不支持QtWebEngine. 之前做项目需要在百度离线地图 ...

js使用百度离线地图

获取百度 JavaScript API 并使用

js使用百度离线地图相关推荐

最新文章

热门文章