bigemap地图下载器 百度离线地图API接口文档及接口调用实例
Hello, World!
创建第一个离线地图 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();即可
地图瓦片经过裁剪后其余部分为白色,百度地图默认灰色背景,首先设置地图容器背景色为白色
效果如下:
图1 地图显示