百度地图的使用

百度地图作为一个开源平台在使用的时候具备诸多的功能

在介绍之前先分享官网百度地图-百万开发者首选的地图服务商,提供专属的行业解决方案百度地图开放平台作为百万开发者首选的地图服务商,不仅面向开发者提供包括API、SDK、SaaS、PaaS、DaaS等服务，还面向B/G两端提供专业的行业解决方案，包括物流行业方案、文旅行业方案、交通行业方案、汽车行业方案、金融行业方案等，助力千行百业数字化转型及智能化升级。https://lbsyun.baidu.com/

如上图所示功能点比较丰富

在进行使用之前的话需要注册登录百度账号

进入到百度开发平台进入账号设置进行相关的验证

不会申请ak密钥的可以登录以下网站观看

jspopularGL | 百度地图API SDKguidehttps://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey进行使用的第一步需要对头部文件和地图容器样式的编写，让地图容器充满网页。

    <style type="text/css">  
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #container{height:100%}  
    </style>

然后就是对api进行引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

里面的密钥就是上面进行申请的

然后就是初始化地图包括初始化坐标和比例

var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

在地图的使用中对于鼠标缩放的使用极为重要，一般时候是默认的需要开启

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

对于地图的旋转角度和倾斜角度也是可以自定义的如下

map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度

// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
    enableRotate: false,
    enableTilt: false
});

 把地图更换为地球模式话可以使用

map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

对于视觉效果有需求的话也是提供相应操作的

1进入地图开放平台的控制台创建一个地图样式，进入编译器进行需求调节完成发布之后会生成相应的样式id，进行api调用即可

map.setMapStyleV2({     
  styleId: '3d71dc5a4ce6222d3396801dee06622d'
});

效果如图（在智慧大屏方面该效果使用的较多）

我比较喜欢的话还是文字标注功能

jspopularGL | 百度地图API SDK

可以自定义添加文本标注的类

API提供了默认的标注样式我们可以通过setStyle来指定自定义样式。

详情如下

var point = new BMapGL.Point(116.404, 39.915);
var content = "label";
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
})  
map.addOverlay(label);                        // 将标注添加到地图中


var point = new BMapGL.Point(116.404, 39.915);
var content = 'label';
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,
    offset: new BMapGL.Size(10, 20)
})  
map.addOverlay(label);                        // 将标注添加到地图中
label.setStyle({                              // 设置label的样式
    color: '#000',
    fontSize: '30px',
    border: '2px solid #1E90FF'
})

label.addEventListener("click", function(){  
    alert("您点击了标注");  
});

在监听的时候可以添加触发事件比如文本框选取之类的

当然信息窗口也同样适用

var opts = {
    width: 250,     // 信息窗口宽度
    height: 100,    // 信息窗口高度
    title: "Hello"  // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

在大屏项目里面可以同样使用其进行重点显示和信息补充

对于一夜显示多张地图的话官网也有详细解释

​​​​​​地图JS API示例 | 百度地图开放平台
 

两种方式

使用iframe框架引入：

<iframe  src="地图.html"></iframe>

使用<object>标签引入：

<object  data="地图.html"></object>

一般的话原地图的文件决定了页面的位置和大小

样式的话可以添加到标签属性

其余详细的解析可以自己去官网查询