Hello, World！百度离线地图发布教程百度地图API

创建第一个离线地图 HTML+JS完整代码：

<!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <title>Hello World</title>
 <style type="text/css">
         body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
         #allmap{width:100%;height:100%;}
 </style>
 <!-- 引入核心js文件 -->
 <script type="text/javascript" src="js/apiv.2.0.js"></script>
 </head>
 <body>
 <div id="allmap"></div>
 </body>
 </html>
 <script type="text/javascript">
         // 创建Map实例
         var map = new BMap.Map("allmap", {enableMapClick:false});
         // 设置地图背景色为白色
         map.getContainer().style.background = '#FFF';
         // 初始化地图,设置中心点坐标和地图级别
         var point = new BMap.Point(110.1, 35.1);
         map.centerAndZoom(point, 5);
 </script>

创建地图实例

var map = new BMap.Map("allmap");

位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

注意在调用此构造函数时应确保容器元素已经添加到地图上。

创建点坐标

var point = new BMap.Point(110.1, 35.1);

这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。

地图初始化

map.centerAndZoom(point, 5);

在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作

默认设置

map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
map.enableKeyboard();                         // 启用键盘操作。
map.enableContinuousZoom();                 //启用连续缩放效果
map.enableDragging();                        //开启拖拽

若需要禁止拖拽设置 map.disableDragging();即可

地图瓦片经过裁剪后其余部分为白色，百度地图默认灰色背景，首先设置地图容器背景色为白色

效果如下：

QQ截图20170301225627.jpg

图1 地图显示