js使用百度离线地图

最新推荐文章于 2024-08-03 16:53:18 发布

温酒斟与你

最新推荐文章于 2024-08-03 16:53:18 发布

阅读量4.2k

点赞数 2

分类专栏：前端开发 js百度离线地图文章标签：离线地图 js离线地图前端离线地图百度离线地图

本文链接：https://blog.csdn.net/qq_41853674/article/details/103508520

版权

前端开发同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

js百度离线地图

1 篇文章 0 订阅

订阅专栏

由于客户方只有内网部署，要求使用离线地图，所以这里使用百度离线地图，整体效果如下：
在这里插入图片描述
跟线上地图区别不大，可以精确到街道地址，完全符合客户需求，详解操作步骤：

获取百度 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>