【HTML】百度地图webAPI使用

2021-02-15 19:18

阅读:388

标签:dev   span   api   open   control   scroll   百度地图api   style   function   

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}
城市:{$city}
地址:{$shopInfo[‘address‘]}
", opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow,point2); //开启信息窗口 } script>

 

【HTML】百度地图webAPI使用

标签:dev   span   api   open   control   scroll   百度地图api   style   function   

原文地址:https://www.cnblogs.com/xuzhengzong/p/8427330.html


评论


亲,登录后才可以留言!