如何js引入百度地图

具体流程

如何js引入百度地图_第1张图片

打开百度api文档-申请秘钥-添加域名白名单-引入api

function AddMap(){
    //设置地图容器高度
    var headerH=this.elById("icon_header").offsetHeight;
    this.elById("map_show").style.height=headerH+"px";
}
/**
 * @param el 地图初始化容器
 * @param p  初始化坐标点
 */
AddMap.prototype.init=function(el,p){
    var point={
        lng:116.404113,
        lat:39.914965
    };
    if(p && p.lng && p.lat){
        point.lng=p.lng;
        point.lat=p.lat;
    }
    this.m = new BMap.Map(el);      //实例化地图
    this.p = new BMap.Point(point.lng,point.lat);

    this.m.enableContinuousZoom();    //启用地图惯性拖拽
    this.m.enableScrollWheelZoom();   //启用滚轮放大缩小
    this.m.centerAndZoom(this.p, 12);  //设置地图显示中间点、地图显示级别

    this.addMaker(this.p);
};

AddMap.prototype.elById=function(id) {
    return document.getElementById(id);
};

//添加坐标显示
AddMap.prototype.addMaker=function(location){
    var mk = new BMap.Marker(location);
    mk.enableDragging();        //marker可拖拽
    mk.enableMassClear();
    this.m.addOverlay(mk); //在地图中添加marker
};

//定位到具体位置
AddMap.prototype.setPlace=function(m){
    var _this=this;
    m.clearOverlays();    //清除地图上所有覆盖物
    function myFun(){
        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
        m.centerAndZoom(pp, 15);  //设置地图显示中间点、地图显示级别
        _this.addMaker(pp);
    }
    var local = new BMap.LocalSearch(m, { //智能搜索
        onSearchComplete: myFun
    });
    local.search(myValue);
};

var mapInclude=new AddMap();

//初始化地图
//需传入容器DOM(id),可传坐标点定位 
mapInclude.init("map_show",{lng:xxx,yyy});

效果图

如何js引入百度地图_第2张图片

 

 

 

获取坐标方法

原谅我没找到怎么获取,这个方法很ben~(直接copy到demo,手动获取)




    

行政区域工具



 

你可能感兴趣的:(如何js引入百度地图)