1.百度地图

百度地图开放平台 https://lbsyun.baidu.com/

使用百度地图时导入JavaScript包

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

1.1.如何申请 ak 密钥

在开发平台找控制台 / 应用管理 / 我的应用创建访问应用（AK）密钥
在这里插入图片描述

1.2.参考代码

在开发平台找开发文档 / JavaScript API 可以得到百度地图各种应用的 DEMO

在这里插入图片描述

2.展示地图

2.1.显示地图

导入 JavaScript 包

<script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=bfnV92gwMphakBP0m8usEhzq7bxwCB1s"></script>
<script th:src="@{/js/jquery-3.2.1.min.js}"  src="../../static/js/jquery-3.2.1.min.js"></script>

增加样式设置

<style type="text/css">
    body, html,#allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin:0;
        font-family:"微软雅黑";
    }
</style>

页面 HTML 元素

    <div id="allmap"></div> <!--地图div-->

增加javascript 代码

默认打开的地址 , 可以通过传入的 经纬度或者地址名字两种方式

<script  type="text/javascript"  >
    map = new BMap.Map("allmap");

    // 设置中心点坐标和放大倍数
    // 以 经纬度 定位
    // var point = new BMap.Point(lng, lat);
    // map.centerAndZoom(point, 12);
    // 以 地名 定位
    map.centerAndZoom('哈尔滨市', 12);

    map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.ScaleControl());          //比例尺
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));   //右下角，打开缩略地图
    // map.addControl(new BMap.MapTypeControl());        //地图类型 三维方式 有错误

</script>

2.2.搜索地址

页面增加元素

地名:<input type="text" name="modalAddr">
<input type="button" value="查询"  onclick="searchByStationName()"> 
经度:<input name="acLng" type="text">
纬度:<input name="acLat" type="text">

增加处理函数

function searchByStationName() {

    localSearch = new BMap.LocalSearch(map); // 创建 搜索对象
    localSearch.enableAutoViewport();     //允许自动调节窗体大小

    /*
     清理 信息
    */
    map.clearOverlays();//清空原来的标注
    $("input[name='acLng']").val("");
    $("input[name='acLat']").val("");
    // 得到查询地址
    var keyword = $("input[name='modalAddr']").val();
    // 搜索结果 回调函数
    localSearch.setSearchCompleteCallback(function (searchResult) {
        console.log(searchResult)
        // 取满足条件中的第0个
        var poi = searchResult.getPoi(0);
        console.log(poi.address)
        map.centerAndZoom(poi.point, 15);

        // 创建一个标注，为要查询的地方对应的经纬度
        var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  
        if (marker != null && marker != undefined) {
            $("input[name='acLng']").val(poi.point.lng);
            $("input[name='acLat']").val(poi.point.lat);
        }
        //标注点可拖拽
        marker.enableDragging();

        // 标注 绑定拖拽事件
        marker.addEventListener("dragging", function (msg) {
            $("input[name='acLng']").val(msg.point.lng);
            $("input[name='acLat']").val(msg.point.lat);
        });
        // 显示 覆盖物
        map.addOverlay(marker);

        // 用于显示的信息
        var content = keyword + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
        // 点击显示内容
        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
        // 绑定点击事件
        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);
        });
        // 标注 绑定拖拽释放事件
        marker.addEventListener("dragend", function () {
            alert("lng:" + this.getPosition().lng + "    " + "lat:" + this.getPosition().lat)
        });
    }); 

    localSearch.search(keyword);
}