跳至正文

百度地图 JavaScript API GL 展示地图

  • 前端

地图展示

编写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>Baidu Map </title>  
    <style type="text/css">  
        #container {overflow: hidden; width: 100%; height: 450px; margin: 0; font-family: '微软雅黑';}
        .infowindow {width: 100%; overflow: hidden;}
        .infowindow hr {border: 0; border-bottom: 1px #ccc solid; margin-bottom: 10px;}
        .infowindow img {float: left; margin-right: 10px; width: 90px;}
        .infowindow p {font-size: 12px; line-height: 1.7;}
    </style>  
</head>  
<body>
</body>  
</html>
引入百度地图API文件
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
初始化地图逻辑

首先创建地图实例，之后用一个Point坐标点和缩放级别来初始化地图

var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
创建点标记
// 创建点标记
var marker = new BMapGL.Marker(new BMapGL.Point(120.21086,29.274559));
// 在地图上添加点标记
map.addOverlay(marker);
开启鼠标滚轮缩放

地图的鼠标滚轮缩放默认是关闭的，需要配置开启。

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
添加地图控件
var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
设置地图的旋转角度和倾斜角度

地图可以自定义旋转角度和倾斜角角度

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

// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
    enableRotate: false,
    enableTilt: false
});
添加信息窗口
var opts = {
    width: 300,
    height: 90,
    title: '<strong style="display:block;padding-top:3px;font-size:16px;">东阳市恒达金属波纹管有限公司</strong>'
};
var infoWindow = new BMapGL.InfoWindow('<div class="infowindow"><hr><img src="https://file.cdn.lancent.net/dyhengda/assets/images/logo_default.png"><p>地址：浙江省金华市东阳市经济开发区西城工业园区</p><p>电话：0579-86812635</p></div>', opts);
map.openInfoWindow(infoWindow, point);
function getInfoContent() {
    alert(infoWindow.getContent());
}

至此我们完成了一个完整的地图展示的例子，可以试着在地图区域按住鼠标右键进行拖动，地图的视角和旋转角度会随之改变。

完整代码如下：
<!-- Baidu Map API Style -->
<style>
    #container {overflow: hidden; width: 100%; height: 450px; margin: 0; font-family: '微软雅黑';}
    .infowindow {width: 100%; overflow: hidden;}
    .infowindow hr {border: 0; border-bottom: 1px #ccc solid; margin-bottom: 10px;}
    .infowindow img {float: left; margin-right: 10px; width: 90px;}
    .infowindow p {font-size: 12px; line-height: 1.7;}
</style>
<div id="container"></div>

<!-- Baidu Map API -->
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=ed5HG03k5lWEAKF3ggkalDvSwnsCBAxq"></script>
<script>
var map = new BMapGL.Map('container');
var point = new BMapGL.Point(120.21086,29.274559);
map.centerAndZoom(point, 15);

// 创建点标记
var marker = new BMapGL.Marker(new BMapGL.Point(120.21086,29.274559));
// 在地图上添加点标记
map.addOverlay(marker);
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
var opts = {
    width: 300,
    height: 90,
    title: '<strong style="display:block;padding-top:3px;font-size:16px;">东阳市恒达金属波纹管有限公司</strong>'
};
var infoWindow = new BMapGL.InfoWindow('<div class="infowindow"><hr><img src="https://file.cdn.lancent.net/dyhengda/assets/images/logo_default.png"><p>地址：浙江省金华市东阳市经济开发区西城工业园区</p><p>电话：0579-86812635</p></div>', opts);
map.openInfoWindow(infoWindow, point);
function getInfoContent() {
    alert(infoWindow.getContent());
}
</script>

原文链接：jspopularGL | 百度地图API SDK (baidu.com)