百度地图JavaScript集成（BMapGL）

一，百度地图api密钥获取

进入这个 百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 网址后，点击右上角的登录，用自己的百度账号进行登录，登录后可以进入api控制台。（如果没有注册为开发者需要注册认证完即可），然后单击创建应用按钮。

填写好应用名称，选择应用类型为浏览器端，选择使用ip白名单校验方式进行校验。在ip白名单的文本框中填写0.0.0.0/0（或者*号），表示不对ip做任何限制。单击提交，即可在api控制台看到自己创建的AK，就是api请求串的必填参数。

有一点注意的是，未认证（个人或企业）的情况下，每个账号一天最多只有2000次调用额，如果认证了，每个账号每天有10万次调用额。

二，开始使用

1.显示地图

在网页中开始引入js地图脚本

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

请注意有点地方是使用的BMap而不是web网站的BMapGL，在用法上有略微不同，请使用者自行查询BMap相关使用功能，在此只推荐和示例使用BMapGL

然后为地图划分一块区域显示，并为其添加基本的功能

<!-- 页面内的元素 -->
<div id="map" style="height: 360px;width: 720px"></div>
<!-- 脚本信息 -->
<script type="text/javascript">
  var map = new BMapGL.Map("map");
  // 以天安门坐标为镜头中心，12级市级显示地址，必须赋值，范围3-19级
  var camera = new BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(camera,12);
</script>

2.地图经纬标注

在上个示例中，camera已经是一个地址信息了，只不过是镜头的中心，现在需要为其标点

<!-- 页面内的元素 -->
<div id="map" style="height: 360px;width: 720px"></div>
<!-- 脚本信息 -->
<script type="text/javascript">
  var map = new BMapGL.Map("map");
  // 以天安门坐标为镜头中心，12级市级显示地址，必须赋值，范围3-19级
  var camera = new BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(camera,12);
  var point = new BMapGL.Point(116.404, 39.915);
  var marker = new BMapGL.Marker(point);        // 创建标注
  map.addOverlay(marker);                     // 将标注添加到地图中
</script>

此时页面内如下所示

3. 地图文本标注

在当地搜索地址信息，全部标注在地图上

<!-- 页面内的元素 -->
<div id="map" style="height: 360px;width: 720px"></div>
<!-- 脚本信息 -->
<script type="text/javascript">
    var map = new BMapGL.Map("map");
    // 以天安门坐标为镜头中心，12级市级显示地址，必须赋值，范围3-19级
    var camera = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(camera,12);
    // 在镜头所在当地搜索一个地址，标注在地图上
    var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map }
    })
    local.search('医院')
</script>

效果如下图所示

实现输入框搜索选择第一项的功能，添加类似于上图的提示框

<!-- 页面内的元素 -->
<input type="text" id="localSearch"/><button type="button" onclick="search()">搜索</button>
<div id="map" style="height: 360px;width: 720px"></div>
<!-- 脚本信息 -->
<script type="text/javascript">
    var map = new BMapGL.Map("map");
    // 以天安门坐标为镜头中心，12级市级显示地址，必须赋值，范围3-19级
    var camera = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(camera,12);
    function search() {
        var value=document.getElementById('localSearch').value
        map.clearOverlays() //清除当前已有的标点
        // 在镜头所在当地搜索一个地址，标注在地图上
        var local = new BMapGL.LocalSearch(map, {
          	// renderOptions: { map: map },
            onSearchComplete: function (res) {
                var poiInfo=res.getPoi(0)
                // console.log(poiInfo) 打印返回的数据结构
                var marker = new BMapGL.Marker(poiInfo.point);        // 创建标注
                map.setCenter(poiInfo.point)  //设置中心点
                map.addOverlay(marker);                     // 将标注添加到地图中
                var opts = {
                    width : 200,     // 信息窗口宽度
                    height: 100,     // 信息窗口高度
                    title : poiInfo.title , // 信息窗口标题
                }
                var infoWindow = new BMapGL.InfoWindow("地址："+poiInfo.address, opts);  // 创建信息窗口对象
                marker.addEventListener("click", function() {
                    map.openInfoWindow(infoWindow, poiInfo.point); //开启信息窗口
                })
            }
        })
        local.search(value)
    }
</script>

效果如下图所示

4. 点击地图返回标注信息

Geocoder包含了地址的解析和逆解析
地址解析是指，由详细到街道的结构化地址得到百度经纬度信息，且支持名胜古迹、标志性建筑名称直接解析返回百度经纬度。例如：“北京市海淀区中关村南大街27号”地址解析的结果是“lng:116.31985,lat:39.959836”，“百度大厦”地址解析的结果是“lng:116.30815,lat:40.056885”
逆地址解析是指，由百度经纬度信息得到结构化地址信息。例如：“lat:31.325152,lng:120.558957”逆地址解析的结果是“江苏省苏州市虎丘区塔园路318号”。

注意：
1.因为Geocoding和反Geocoding使用的门址数据以及算法都不是一样的，所以会出现不能一一对应的现象。
2.解析过程中可能会出现一对坐标值对应多个地址门牌信息，本接口将返回距离坐标点最近的一个地址门牌信息。

<!-- 页面内的元素 -->
<input type="text" id="localSearch"/>
<div id="map" style="height: 360px;width: 720px"></div>
<!-- 脚本信息 -->
<script type="text/javascript">
    var map = new BMapGL.Map("map");
    // 以天安门坐标为镜头中心，12级市级显示地址，必须赋值，范围3-19级
    var camera = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(camera,12);
    map.addEventListener('click', function(e) {
        // console.log(e)
        // console.log(e.latlng)
        var point = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
        var geolocation = new BMapGL.Geocoder(); 
        //进行逆解析
        geolocation.getLocation(point,function (data) {
            // console.log(data)
            document.getElementById('localSearch').value=data.address
        })
        map.clearOverlays()
        var marker = new BMapGL.Marker(point);
        map.setCenter(point)
        map.addOverlay(marker);
    });
</script>

5. 建议添加的相关组件

此类组件不添加不影响使用，在地图上显示额外的控件

map.addControl(new BMapGL.NavigationControl3D()); //3D控件
map.addControl(new BMapGL.ScaleControl()); //比例尺显示控件
map.addControl(new BMapGL.MapTypeControl()); //切换地图样式控件
map.addControl(new BMapGL.ZoomControl()); //加减号缩放控件
map.addControl(new BMapGL.CityListControl()); //城市选择控件
map.enableScrollWheelZoom(true); //滚轮缩放

三，链接文档

百度地图API SDK
lbsyun.baidu.com/index.php?t…
百度地图jsapi webgl 1.0类参考
lbsyun.baidu.com/cms/jsapi/r…
百度地图jsapi 示例中心
lbsyun.baidu.com/index.php?t…