百度地图Javascript API使用详解

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

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

选择创建应用

按下图操作

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

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

扫描二维码关注公众号，回复： 10650935 查看本文章

<!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>

运行效果展示：

Zartillery

发布了69 篇原创文章 · 获赞 253 · 访问量 4万+

私信关注

百度地图Javascript API使用详解

猜你喜欢