原来百度地图实现如此简单

注册账号

我们首先需要注册一个百度地图账号 https://lbsyun.baidu.com/?qq-pf-to=pcqq.group

然后在在注册一个应用

然后拿到访问应用（AK）

初始化

引用

 <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=jf86FwXP1fTsxeUfs9cq7EIqp4CUxCV9"></script>
    <style>

创建实例

  <div id="container"></div>
    <script>
        var map = new BMapGL.Map("container");
        var point = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(point, 15);

    </script>

效果图

添加控件

 <div id="container"></div>
    <script>
        var map = new BMapGL.Map("container");
        var point = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(point, 15);
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);
    </script>

这样就拥有了 比例尺、缩放控件、城市列表控件

点面线

<div id="container"></div>
    <!-- 存放地图的容器 -->
    <script type="text/javascript">
        var map = new BMapGL.Map("container");
        // 创建地图实例 
        var point = new BMapGL.Point(113.6648, 34.7835);
        // 创建点坐标 
        map.centerAndZoom(point, 17);
        // 初始化地图，设置中心点坐标和地图级别 
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        // 添加点
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);
        // 将标注添加到地图中
        // 记录点的数组
        var lineArr = [];
        // 记录上一个个
        var last = null;
        // 添加事件      
        map.addEventListener("click", e => {
            //  有上一个就移除上一个
            last ? map.removeOverlay(last) : '';
            // 获取单击点的位置(经度，纬度)
            var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
            // 添加到数组组件
            lineArr.push(p);
            // 创建一个标记
            var m = new BMapGL.Marker(p);
            // 重新定义上一个
            last = m;
            // 显示标记
            map.addOverlay(m);
        })
        // 双击事件
        map.addEventListener("dblclick", () => {
            // 移除最后点
            map.removeOverlay(last)
            // 多边线 strokeColor颜色  strokeWeight线粗细 strokeOpacity 线的透明度        
            // var polyline = new BMapGL.Polyline(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
            // 显示线
            // map.addOverlay(polyline);
            var polygon = new BMapGL.Polygon(lineArr, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "red" })
            map.addOverlay(polygon);
            // 清空数组
            lineArr = [];

        })



        // 地图控件
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);

        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);

        var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);
    </script>