关于百度地图API的调用

这段时间的项目上需要用到百度地图标记客户，在网上找了很多，发现都不管用，于是按照官方文档自己写了一个，话不多说，直接上代码！

<div style="width:70%;height:750px;border:#ccc solid 1px;margin-right: 20px;" id="dituContent" class="col-md-8"></div>

先新建一个百度地图的容器。 (当然读者们想要调用百度地图api的话得先在官网申请一个ak哈，这方面不过多赘述)

var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(116.46,39.92);//定义一个中心点坐标
map.centerAndZoom(point,11);//设定地图的中心点和坐标并将地图显示在地图容器中

这一段想必大家都能看懂，所谓中心点就是，以point(116.46,39.92)点为中心点往外延伸我们的地图，直到填满地图容器，其中11表示的是地图的显示级别，我这里设置的是11级，也就是显示到“镇”级别。再然后：

window.map = map;//将map变量存储在全局

这句就是将上一个方法的map变量变为全局变量，以方便后面方法的调用。接下来，就是设置地图事件了，比如鼠标滚轮放大缩小地图：

map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图

其实还有更多的enabled，但是我目前的项目只要这么多就够了。接下来呢，我们就可以像地图中添加各种空间了，卫星图的，混合图啊，全景啊，比例尺啊。。。。上代码：

//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_sca);
//向地图中添加地图类型
map.addControl(new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_RIGHT,type:BMAP_NAVIGATION_CONTROL_LARGE}));
//设置城市信息
map.setCurrentCity(" 北京市 ");

这边的 “北京市” 就是设置地图的初始显示背景，好了！我们的地图算是已经初始完善了，但是有的小朋友还需要在地图上标记某个地点，接下来就是往地图上添加mark标记，接着上代码：

var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(116.46,39.92);//定义一个中心点坐标
map.centerAndZoom(point,11);//设定地图的中心点和坐标并将地图显示在地图容器中
var marker = new BMap.Marker(point);//新建标注点
// function addMarker(point,index){
//     var myIcon = new BMap.Icon("image/mark.png", new BMap.Size(23,25),{
//         anchor:new BMap.Size(10,25),          //该注释段为更改标注图标，可以按照自己的喜好更改//         imageOffset: new BMap.Size(0,0 - index * 25)
// });
// var marker = new BMap.Marker(point,{icon:myIcon});
map.addOverlay(marker);//向地图中添加标记点
marker.enableDragging();//允许标注拖拽功能
marker.addEventListener("dragend",function (e) {
    alert("当前位置: " + e.point.lng + "," + e.point.lat) //alert出当前拖拽位置的经纬度
});
var opts = {
    width : 250,       //信息框宽度
    height : 100,      //信息框高度
    title : "企业信息"   //信息框标题
};
var infoWindow = new BMap.InfoWindow(" 信息窗口显示 ",opts); //创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); //打开信息窗口

这一段就是mark标记的内容了，效果如下：

OK！上面就是本次分享内容了，最后要记得初始化地图 ~~~~ 最后贴上完整代码！

//创建和初始化地图函数：
function initMap(){
    createMap();//创建地图
    setMapEvent();//设置地图事件
    addMapControl();//向地图添加控件
}

//创建地图函数：
function createMap(){
    var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
    var point = new BMap.Point(116.46,39.92);//定义一个中心点坐标
    map.centerAndZoom(point,11);//设定地图的中心点和坐标并将地图显示在地图容器中
    var marker = new BMap.Marker(point);//新建标注点
    // function addMarker(point,index){
    //     var myIcon = new BMap.Icon("image/mark.png", new BMap.Size(23,25),{
    //         anchor:new BMap.Size(10,25),
    //         imageOffset: new BMap.Size(0,0 - index * 25)
    // });
    // var marker = new BMap.Marker(point,{icon:myIcon});
    map.addOverlay(marker);//向地图中添加标记点
    marker.enableDragging();//允许标注拖拽功能
    marker.addEventListener("dragend",function (e) {
        alert("当前位置: " + e.point.lng + "," + e.point.lat) //alert出当前拖拽位置的经纬度
    });
    var opts = {
        width : 250,       //信息框宽度
        height : 100,      //信息框高度
        title : "企业信息"   //信息框标题
    };
    var infoWindow = new BMap.InfoWindow("信息窗口显示",opts); //创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());                                                     //打开信息窗口
    //进入全景图标位置
    var stCtrl = new BMap.PanoramaControl();
    stCtrl.setOffset(new BMap.Size(20,20));
    map.addControl(stCtrl);
    //浏览器定位
    // var geolocation = new BMap.Geolocation();
    // geolocation.getCurrentPosition(function(r){
    //     if(this.getStatus() == BMAP_STATUS_SUCCESS){
    //         var mk = new BMap.Marker(r.point);
    //         map.addOverlay(mk);
    //         map.panTo(r.point);
    //         alert('您的位置：'+r.point.lng+','+r.point.lat);
    //     }
    //     else {
    //         alert('failed'+this.getStatus());
    //     }
    // });
    //ip定位
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
        alert("当前定位城市:"+cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
    // //定位SDK辅助定位
    // function myFun(result){
    //     var cityName = result.name;
    //     map.setCenter(cityName);
    //     alert("当前定位城市:"+cityName);
    // }
    // var myCity = new BMap.LocalCity();
    // myCity.get(myFun);
    window.map = map;//将map变量存储在全局
}
//载入全景信息
window.onload = function () {
    var panorama = new BMap.Panorama("panorama");
    panorama.setPosition(new BMap.Point(119.972394,31.979135));
    panorama.setPov({heading: -40, pitch: 6});
};
//地图事件设置函数：
function setMapEvent(){
    map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
    map.enableScrollWheelZoom();//启用地图滚轮放大缩小
    map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
    map.enableKeyboard();//启用键盘上下左右键移动地图
}

//地图控件添加函数：
function addMapControl(){
    //向地图中添加缩放控件
    var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
    map.addControl(ctrl_nav);
    //向地图中添加缩略图控件
    var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1,type:BMAP_NAVIGATION_CONTROL_LARGE});
    map.addControl(ctrl_ove);
    //向地图中添加比例尺控件
    var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
    map.addControl(ctrl_sca);
    //向地图中添加地图类型
    map.addControl(new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_RIGHT,type:BMAP_NAVIGATION_CONTROL_LARGE}));
    //设置城市信息
    map.setCurrentCity("北京市");
}
initMap();//创建和初始化地图

最终效果

感谢小朋友们评论纠正~ That’s it ! Wish everyone a nice day~