在页面中引入地图

首先要注册百度地图的开发者账号
然后开始创建密钥

新建一个index.html

然后引用百度地图API文件

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

创建地图容器元素

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

设置容器样式

设置容器样式大小，使地图充满整个浏览器窗口：

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

创建地图实例

var map = new BMap.Map("container");
注意：

1. 在调用此构造函数时应确保容器元素已经添加到地图上。
2. 命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。

设置中心点坐标

这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
var point = new BMap.Point(116.404, 39.915);

地图初始化，同时设置地图展示级别

在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。
map.centerAndZoom(point, 15);
然后通过浏览器打开，效果如图：

地图也可以设置其他属性

向地图添加控件

可以使用Map.addControl()方法向地图添加控件。

addMapCtrl();
function addMapCtrl(){
   map.enableScrollWheelZoom(true);   //地图可以缩放
   map.addControl(new BMap.NavigationControl());   // 地图导航
   map.addControl(new BMap.ScaleControl());      // 缩放控件
   map.addControl(new BMap.OverviewMapControl());    //概况 
   map.addControl(new BMap.MapTypeControl());     //地图类型
}

向地图添加标注

var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中 

定义标注图标

通过Icon类可实现自定义标注的图标

let Icon = new BMap.Icon(
        './assets/start_point.png',
        new BMap.Size(36,42),
        //显示图片大小
        {imageSize:new BMap.Size(36,42),anchor:new BMap.Size(18,42)})
        //把原始图片缩小为36,42 偏移到底部中心区域 （默认左上角）}

添加活动范围

 map.addEventListener("click",e=>{
        console.log(e);
        console.log(e.point);
        var marker = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat))
        map.addOverlay(marker);
    })
    var circle = new BMap.Circle(
        point,
        //中心点位置
        500,
        //半径
        {strokeColor:"blue",strokeWeigth:2,strokeOpacity:0.5,fillOpacity:0.4})
        //stroke边框  fill填充   Opacity 透明度
    map.addOverlay(circle);

添加信息窗口

信息窗口是地图上方浮动显示的HTML内容，可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。

let str = `<div class="info"><p>hello world</p></div>`;
   
       var info  = new BMap.InfoWindow(
           str, //    弹出框内容
           {title:'title'}) // 配置  width 宽，height高， title标题

        marker.addEventListener("click",()=>{
            map.openInfoWindow(info,point);
            // 当marker被单击时候打开信息窗口 
        })
        map.openInfoWindow(info,point);

路线规划功能

var end = null;
    map.addEventListener("click",e=>{
        console.log(e.point);
        end = new BMap.Point(e.point.lng,e.point.lat);
        //单击获取结束的点；
        driving.search(point,end)
    })
    var driving = new BMap.DrivingRoute(map, { 
        renderOptions: { 
            map: map, 
            autoViewport: true 
        } 
    });

搜索附近景点

<input type="text" onblur="blurHd(this)">


var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map}
    });
    local.search("景点");  
    function blurHd(e){
        local.search(e.value);  
    }

通过api获取当前城市

<h1></h1>


$(function(){
  $.ajax({
     url:'http://api.map.baidu.com/location/ip?ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde&ip=&coor=bd09ll&output=jsonp',
    dataType:"jsonp",
    success:function(res){
      console.log(res);
      $("h1").html(res.content.address);
   }
  })
})

搜索附近

<div class="search">
  <input type="text" id="searchbox">
  <div class="tip"></div>
</div>

$(function(){
        $.ajax({
            url:'http://api.map.baidu.com/location/ip?ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde&ip=&coor=bd09ll&output=jsonp',
            dataType:"jsonp",
            success:function(res){
                console.log(res);
                $("h1").html(res.content.address);
            }
        })
        $("#searchbox").on("input",function(){
            $(".tip").show();
            //显示tip
            $.ajax({
                url:`http://api.map.baidu.com/place/v2/suggestion?query=${$("#searchbox").val()}&region=郑州&city_limit=true&output=json&ak=PWG78ZE4s7jemDllfMnfwLYVALKPYZdy`,
                dataType:"jsonp",
                success:function(res){
                    console.log(res);
                    $(".tip").html(res.result.map(item=>`<p>${item.name}</p>`).join(''));
                }
            })
        })
        $(".tip").on("click","p",function(){
            local.search($(this).text());  
            // 执行地图搜索 为当前单击的p标签
            $(".tip").hide();
            // 隐藏tip
        })       
    })

其他更多好玩的用法详情参见：
http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/helloworld