用百度 map api 展示时空数据（二）

最新推荐文章于 2020-12-23 08:14:23 发布

两鬓已不能斑白

最新推荐文章于 2020-12-23 08:14:23 发布

阅读量971

点赞数

分类专栏： BMap 文章标签：百度地图 web api

本文链接：https://blog.csdn.net/u010429424/article/details/42978201

版权

BMap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇文章就主要写一写如何初步的将百度地图加入到自己的项目里。

我的系统后端使用thinkphp框架，前端就是html ，js，css。百度地图属于前端的部分，主要用到js和html。

下面直接粘JS代码

/*
* 初始加载百度地图模块
*/
var map = new BMap.Map("showmap",{minZoom:9,maxZoom:18});//新建地图
map.centerAndZoom(new BMap.Point(123.4432300000,41.8239810000),13);
map.enableScrollWheelZoom();
// 添加导航控件
var navigationControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,// 靠右上角位置
type: BMAP_NAVIGATION_CONTROL_LARGE,// LARGE类型
enableGeolocation: true// 启用显示定位
});
map.addControl(navigationControl);
//设置地图边界
var bounds = new BMap.Bounds(new BMap.Point(122.5498220000,41.2869960000),new BMap.Point(124.1871810000,42.4217280000));
try {
BMapLib.AreaRestriction.setBounds(map, bounds);//设置地图边界
}catch(e){
alert(e);
}

我觉得这段代码的注释写的还可以，比较清楚。其中“showmap”是<div id="showmap"></div>的ID。

因为我要展示的是沈阳地区的时空数据，所以我设置的地图中心点为：Point(123.4432300000,41.8239810000)，初始时的级别为13。并通过try catch 设置了地图的显示范围，使得无论用户如何操作，地图始终都显示沈阳及周边地区。以上代码都是从百度提供的示例DEMO中直接复制的，可见百度map api 的使用是多么的方便。

我还要设置一下基本的css：

body, html,#showmap {width:100%;height:500px;overflow:hidden;margin:0;font-family:"微软雅黑";float:left;}

将width设置为100%按我的理解就是“全屏宽”，高度我设置为500px，overflow设置为hidden，就是隐藏的意思。如果地图超出设置的显示范围，那么超出部分不显示。overflow也可以设置为auto，这样设置时，超出的部分以横、竖滚动条的形式显示出来。

这样，百度地图算是初步的加载到了系统里。