一、 开场

很多小伙伴又被公司逼迫的要开发啥离线地图啥的，我今天就来解决你们的痛苦，其实就是将js下载下来，将js中的加载地图瓦片路径改为自己本地的，下面认真看下去。

二、 步骤

1.  首先到百度地图API开发平台：http://lbsyun.baidu.com/index.php ，申请一个应用，现在申请应用是免费的

2.  其次到V3.0 API文档这 ：http://lbsyun.baidu.com/jsdemo.htm#canvaslayer

将路由src的路径拷贝到浏览器中，在前面加上 https://${src} ，将秘钥替换为申请的应用秘钥，打开是下面这样的

最后再将本次的src路由拷贝到浏览器，就是百度地图离线API的js文件内容，部分如下图

再用JS格式化工具格式化：https://tool.oschina.net/codeformat/js/

3. 开始写代码了

[1] 创建一个前段项目

将格式化好的JS拷贝到js下面，并且命名为 bmap_offline_api_min.js

在创建一个getmodules2.0.js，这个主要作用就是本地资源工具js，下面会说到的如何下载工具js，我们先改变0bmap_offline_api_min.js

[2] 写一个html页面，index.html

<!DOCTYPE html>  
<html>  
    <head>  
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>Hello, World</title>  
        <style type="text/css">  
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #container{height:100%}  
        </style>  
		<script type="text/javascript" src="js/map3.0_init.js"></script> 
        <script type="text/javascript" src="js/bmap_offline_api_min.js">
        </script>
    </head>  

    <body>  
        <div id="container"></div> 
        <script type="text/javascript"> 
	
		// 百度地图API功能
		var map = new BMap.Map("container");    // 创建Map实例
		var point = new BMap.Point(116.404, 39.915);
		map.centerAndZoom(point, 1);  // 初始化地图,设置中心点坐标和地图级别			
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	
		var json_data = [[116.404,39.915],[110.404, 30.916],[96.404, 39.917]];
		var pointArray = new Array();
		for(var i=0;i<json_data.length;i++){
			var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
			map.addOverlay(marker);    //增加点
			
			 var infoWindow = new BMap.InfoWindow
			                                ("<table class='mytable'  border='0' cellspacing='0' cellpadding='0'>"
			                                + "<tr><td>站点名称：111" 
			                                + "</td></tr><tr><td>经度：" + json_data[i][0]
			                                + "</td></tr><tr><td>纬度：" + json_data[i][1]
			                                + "</td></tr></table>");
			
			pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
			marker.addEventListener("mouseover",function(){
				this.openInfoWindow(infoWindow);
			});
			// 鼠标移开标注点要发生的事
			marker.addEventListener("mouseout", function () {
				this.closeInfoWindow(infoWindow);
			});
		}
	    map.addEventListener("zoomend", function(e){
	      console.log('地图级别: '+map.getZoom() );
	    });
	
	
        </script>  
		
    </body>  
</html>

 

[3] 我们通过索引 &mod= 定位到

我们加一个debuge，打开index.html 打开F12会看到下面这个东西，拷贝到 浏览器中，地址后面再加一个 &mod="" 如下地址

http://api0.map.bdimg.com/getmodules?v=2.0&t=20140707&mod=marker_w34tq5

mod 哪里来呢？下面我们在修改这快东西如下

mod其实就是控制台数组的元素，如果有就要家在一次，加载后呢？加载完之后我们将加载的js放在 getmodules2.0.js 中，如下图

就这样将数据加载进来。

[4] 我们通过 main.main_domain_cdn 定位找如下内容

将下面的内容改为

[5] 修改瓦片加载路径，老规矩，通过getTilesUrl定位下图所示的内容

修改为下图所示

 

[6] 上面的js就修改完了，我们再添加一个js  map3.0_init.js，这个JS是最先被引入的

/**
 * 离线API初始化, 请在加载map3.0.js之前引入
 */

/**
 * 这是必须要确认的配置
 * 瓦片图必须是png图像
 */
var bmapConfig = {
    'tiles_path'     : '',      //显示普通地图，为空默认在 tiles/ 目录
    'tiles_satellite_path': '', //显示卫星影像，为空默认在 tiles_satellite/ ，只有底图没有地址标注
    'tiles_hybrid_path'   : ''  //显示带有街道的卫星影像，为空默认在 tiles_hybrid/，需和卫星影像配合使用
  };
  
  //获得API主目录，一般不需要修改
  var scripts = document.getElementsByTagName("script");
  var _JS__FILE__ = scripts[scripts.length - 1].getAttribute("src");
  bmapConfig.home_dir = _JS__FILE__.substr(0, _JS__FILE__.lastIndexOf("/"));
  if( bmapConfig.tiles_path.length == 0 ){
    bmapConfig.tiles_path =  "./fromat";
  }
  
  //调试日志，请保留
  function bmapLog(s){
    if(typeof console != 'undefined')
      console.log('>>> '+s);
  }

 

4. 砸门再说说 InfoWindow，我们就说说多个InfoWindow，解决你们for多个标注，显示的内容是最后一个的

思路：要闭包

var json_data = [[116.404,39.915,"1"],[110.404, 30.916,"2"],[96.404, 39.917,"3"]];

for(var i=0;i<json_data.length;i++){
		var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
		map.addOverlay(marker);    //增加点

		(function () {
			var index = i;
			var opts = {
				width: 100, // 信息窗口宽度
				height: 5
			}
			var infoWindow = new BMap.InfoWindow(
					"<table class='mytable'   border='0' cellspacing='0' cellpadding='0'>"
					+ "<tr><td>地点：" + json_data[index][2]
					+ "</td></tr></table>",opts);
			var _marker = marker;
			_marker.addEventListener("mouseover", function () {
				this.openInfoWindow(infoWindow);

			});
			_marker.addEventListener("mouseout", function () {
				this.closeInfoWindow(infoWindow);

			});
		})()
	}

这里基本就完了，现在就是加入瓦片了，关注我的公众号我提供瓦片下载及方法 

 

 

Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

2025年最佳AI降重软件评测：嘎嘎降AI在降低AI检测率方面的核心优势分析

avatar 2048 AI社区
cover

从技术表演到价值落地——从云栖大会透视中国AI商业化落地密码

avatar 2048 AI社区

C#中的异步编程模型与最佳实践探索

异常处理机制也得到增强，异步方法中产生的异常会被捕获并封装到Task对象中，直到await调用时才会重新抛出，这要求开发者采用区别于同步代码的异常处理策略，通常需要结合try-catch块与Task.Exception属性进行多层次捕获。对于需要与传统异步模式交互的场景，TaskFactory.FromAsync方法可将APM模式的Begin/End方法对转换为TAP模式，TaskCompleti

avatar 2048 AI社区