一.简洁版百度地图

1.设置容器样式

在我们创建好的html文件中写好自己想设置地图的宽高

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

2.引入百度地图api文件

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

3.创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

<div id="container"></div>

4.创建地图实例

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

5.完整代码及效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个地图</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>
    <style type="text/css">  
        #container{height: 600px;width: 800px;}   
         /*容器地图的宽高  */
    </style> 
</head>
<body>
    <div id="container"></div>
    <!-- 存放地图的容器 -->
    <script type="text/javascript">
        var map = new BMapGL.Map("container");
        // 创建地图实例 
        var point = new BMapGL.Point(116.404, 39.915);
        // 创建点坐标 
        map.centerAndZoom(point, 15);
        // 初始化地图，设置中心点坐标和地图级别 
    </script> 
</body>
</html>

效果

二.百度地图添加点线面

在原来的百度地图基础上添加内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>
    <style type="text/css">
        #container {
            height: 600px;
            width: 800px;
        }
        /*容器地图的宽高  */
    </style>
</head>

<body>
    <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>
</body>

</html>

三.地图完善，添加地图搜索功能

添加百度地图搜索功能就需要用到我们的jQuery了。

我们把我们的jQuery.js放在我们创建好的文件夹中

在html中通过script标签引入我们的jQuery文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Docment</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>
    <script src="./jq.js"></script>
    <style type="text/css">
        #container {
            height: 600px;
            width: 800px;
        }
        /*容器地图的宽高  */
        /* tip定位 */
        
        .tip {
            position: absolute;
            top: 35px;
            z-index: 10000;
            background-color: rgba(255, 255, 255, .7);
        }
    </style>
</head>

<body>
    <input type="text" id="inp">
    <div class="tip"></div>
    <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 local = new BMapGL.LocalSearch(map, {
            renderOptions: {
                map: map
            },
        });
        //   local.search("景点");
        //当输入框inp 发送动作时候 发送ajax请求到百度 返回键
        $(function() {
            $("#inp").on("input", function() {
                    //  输出文本框的的内容
                    //   console.log($("#inp").val())
                    // 发ajax请求到建议
                    $.ajax({
                        url: `https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}&region=郑州&city_limit=true&output=json&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I`,
                        dataType: "jsonp",
                        success: function(res) {
                            console.log(res.result);
                            // 把res.result遍历成dom节点
                            var str = "";
                            res.result.forEach(item => {
                                    str += `<p class="item">${item.name}</p>`
                                })
                                // 放入到tip div中
                            $(".tip").html(str);
                        }
                    })
                })
                //   给tip添加单击事件 执行搜索
                //  用到事件的代理，不给item添加事件，给item共同的父元素添加事件，通过事件的机制 确定具体按个元素被单击
            $(".tip").on("click", ".item", function() {
                // 获取当前单击item的文本并进行搜索
                local.search($(this).text());
                // 清空tip
                $(".tip").html("");
                // 清空输入框
                $("#inp").val("");
            })
        })
    </script>
</body>

</html>

原文链接：https://blog.csdn.net/Mr_krab/article/details/123905860

一.简洁版百度地图

二.百度地图添加点 线 面

二.百度地图添加点线面