【HTML】百度地图webAPI使用

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>