1、登錄百度地圖，創建WEB應用，設置白名單、獲取該WEB應用的ak

2、在頁面引入相應的js和ak

3、效果（CSS不提供）：

4、實例化地圖map，並給map添加相應的搜索和確定坐標事件

<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("container"); // 創建Map實例
map.enableScrollWheelZoom(); //鼠標滑動設置地圖級別，默認15
map.addControl(new BMap.NavigationControl()); //添加平移縮放控件
map.centerAndZoom(
 
new BMap.Point(116.404, 39.915), 15); //默認指向天安門

map.addEventListener("click", function(e){　　//地圖添加點擊事件
   $(‘#lat‘).val(e.point.lat);
   $(‘#lng‘).val(e.point.lng);
   if($(‘#coordinate‘)){
        $(‘#coordinate‘).val($(‘#lng‘).val()+‘,‘+$(‘#lat‘).val());
    }
    map.clearOverlays();                     
 
// 清空所有標註
    map.addOverlay(new BMap.Marker(e.point));// 將標註添加到地圖中
})

//地圖搜索，傳入參數為一個詳細地址的字符串
function localSearch(address){
    var options = {
        onSearchComplete: function(results){
            if (local.getStatus() == BMAP_STATUS_SUCCESS) { // 判斷狀態是否正確          
                map.clearOverlays();
                marker 
 
= new BMap.Marker(results.getPoi(0).point);
                map.addOverlay(marker); //添加標註     
                //map.centerAndZoom(results.getPoi(0).point,15);   
                map.panTo(results.getPoi(0).point)
                $("#lat").val(results.getPoi(0).point.lat);
                $("#lng").val(results.getPoi(0).point.lng);
                if($(‘#coordinate‘)){
                    $(‘#coordinate‘).val($(‘#lng‘).val()+‘,‘+$(‘#lat‘).val());
                }
            }
        },renderOptions: {map: map, panel: "r-result"}
    };
    var local = new BMap.LocalSearch(map, options);
    local.search(address);
}

//地圖坐標顯示
function pointSearch(){
    map.clearOverlays(); 
    var point2 = new BMap.Point($(‘#lng‘).val(),$(‘#lat‘).val());
    var marker2 = new BMap.Marker(point2);  // 創建標註
    map.addOverlay(marker2);              // 將標註添加到地圖中
    map.panTo(point2);   
    var opts = {
      width : 200,     // 信息窗口寬度
      height: 100,     // 信息窗口高度
      title : "店鋪地址" , // 信息窗口標題
      enableMessage:false,//設置允許信息窗發送短息
      message:""
    }
    var infoWindow = new BMap.InfoWindow("省份：{$province}<br>城市：{$city} <br> 地址：{$shopInfo[‘address‘]}", opts);  // 創建信息窗口對象
    map.openInfoWindow(infoWindow,point2); //開啟信息窗口 
    
}

</script>

【HTML】百度地圖webAPI使用