百度地图Javascript API使用详解

客官°小女子只卖身不卖艺 2021-11-08 16:20 510阅读 0赞

首先登录百度地图开发平台：[http://lbsyun.baidu.com/][http_lbsyun.baidu.com]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70][]

获取密钥，在使用地图时需要用到，点击右上角的控制台

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70 1][]

选择创建应用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70 2][]

按下图操作

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70 3][]

提交后查看应用，查看AK密钥

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70 4][]

接下来创建HTML页面测试百度地图，下面是示例代码

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head lang="en" th:include="include :: header">
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title></title>
        <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=刚刚创建的应用密钥"></script>
        <style type="text/css">
            body { margin: 0; font-family: "Helvetica,Arial,FreeSans"; color: #000000; font-size: 12px; }
            .demo_main { padding: 20px; padding-top: 10px; }
            .demo_title { padding: 10px; margin-bottom: 10px; background-color: #D3D8E0; border: solid 1px gray; }
            .demo_content { padding: 10px; margin-bottom: 10px; border: solid 1px gray; }
            fieldset { border: 1px solid gray; }
        </style>
        <title>地图</title>
    </head>
    <body>
    <div class="demo_main">
        <input type="hidden" id="xy" th:value="${xy}">
        <fieldset class="demo_title">
            地图
        </fieldset>
        <fieldset class="demo_content">
            <div style="min-height: 300px; width: 100%;" id="map">
            </div>
        </fieldset>
    </div>
    <div th:include="include :: footer"></div>
    <script type="text/javascript">
        var markerArrs = $("#xy").val();
        var markerArr = JSON.parse(markerArrs); //将json格式转成对象
        var map;
        function map_init() {
            map = new BMap.Map("map"); //创建map实例
            //设置地图中心点，广州市
            var point = new BMap.Point(113.312213, 23.147267);
            //初始化地图,设置中心点坐标和地图级别
            map.centerAndZoom(point, 13);
            //启用滚轮放大缩小
            mapenableScrollWheelZoom(true);
            //向地图中添加缩放控件
            var ctrlNav = new window.BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrlNav);
            //地图中添加缩略图控件
            var ctrlOve = new window.BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 1
            });
            map.addControl(ctrlOve);
    
            //地图中添加比例尺控件
            var ctrlSca = new window.BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            map.addControl(ctrlSca);
            //绘制显示地图标记点
            for (var i = 0; i < markerArr.length; i++) {
                //经纬度
                var p0 = markerArr[i].mapx;
                var p1 = markerArr[i].mapy;
                var maker = addMarker(new window.BMap.Point(p0, p1), i);
                addInfoWindow(maker, markerArr[i], i);
            }
        }
    
        // 添加地图标注
        function addMarker(point, index) {
            var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
                new BMap.Size(23, 25), {
                    offset: new BMap.Size(10, 25),
                    imageOffset: new BMap.Size(0, 0 - index * 25)
                });
            var marker = new BMap.Marker(point, { icon: myIcon });
            map.addOverlay(marker);
            return marker;
        }
    
        // 点击标记弹出信息窗口
        function addInfoWindow(marker, poi) {
            //窗口标题
            var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.name + '</div>';
            //窗口信息
            var html = [];
            html.push('<p style="font-size:12px;line-height:1.8em">'+"简称：" + poi.shortName + "</br> 行政区号：" + poi.zCode + '</br></p>');
            var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });
    
            var openInfoWinFun = function () {
                marker.openInfoWindow(infoWindow);
            };
            marker.addEventListener("click", openInfoWinFun);
            return openInfoWinFun;
        }
    
        //异步调用百度javascript
        function map_load() {
            var load = document.createElement("script");
            load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
            document.body.appendChild(load);
        }
        window.onload = map_load;
    </script>
    </body>
    </html>

运行效果展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70 5][]

[http_lbsyun.baidu.com]: http://lbsyun.baidu.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70]: /images/20211108/1b87683e132d4195bfb40a88dc2fa6b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70 1]: /images/20211108/8ab3a6ef836349778004cc458c5b7552.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70 2]: /images/20211108/969d1f1b5dd14b19839d8f02e1ba5256.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70 3]: /images/20211108/640385d3822447b0a3aeb858bec66fec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70 4]: /images/20211108/7ab308e8886740b1a33bfab00ac0cd4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5NTcwMA_size_16_color_FFFFFF_t_70 5]: /images/20211108/78084325c2d940fa962a6d9551153d4a.png