HTML5 / JS实现百度地图基本常用功能

很多网站都会使用到地图功能,提供地图接口的第三方也有不少,我这里来聊一下百度地图提供的API及百度地图基本功能的实现:
首先需要在百度地图开放平台申请一个属于自己的密钥,网址:http://lbsyun.baidu.com/apiconsole/key

基本实现

1.引入javascript文件:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥">script>

2.定义一个用于显示地图的容器元素:

<div id="map">div>

3.样式:

body, html, #map {width: 100%;height: 100%;overflow: hidden;margin:0;}
#map {width: 500px;height: 400px;margin:0 auto;}

4.开始写js脚本,重头戏开始了:

var map=new BMap.Map("map");    //创建百度地图对象
map.centerAndZoom("北京",13); //初始化百度地图

此时最最基本的地图功能就可以实现了,下面说一些类参考和更复杂功能的实现。

核心类 - Map类

构造器:Map(页面容器元素ID)
作用:创建地图实例对象
用法:var map=new BMap.Map("map");

控件类 - ScaleControl类

构造器:ScaleControl({key:value})
作用:创建一个比例尺控件(显示固定距离表示几公里)
用法:var scale = new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT});

控件类 - NavigationControl类

构造器:NavigationControl({key:value})
作用:创建一个地图的平移缩放控件(点击可缩放或平移地图)
用法:var nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT});

控件类 - MapTypeControl类

构造器:MapTypeControl({key:value})
作用:创建一个切换地图类型的控件(切换 卫星/平面/三维 视图)
用法:var type = new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_LEFT});

以上三个控件类的参数相似,都为可选参数,不传参默认在左上角显示
选项:anchor - 设置当前控件显示的位置
值:
BMAP_ANCHOR_TOP_LEFT - 左上角
BMAP_ANCHOR_BOTTOM_LEFT - 左下角
BMAP_ANCHOR_TOP_RIGHT - 右上角
BMAP_ANCHOR_BOTTOM_RIGHT - 右下角

控件类 - OverviewMapControl类

构造器:OverviewMapControl({key:value})
作用:创建一个缩略地图控件(在右下角显示一个小缩略地图)
用法:var overview = new BMap.OverviewMapControl({isOpen:true});(设置为默认显示)

基础类 - Point类

构造器:Point(经度,经度)
作用:以指定的经度和纬度创建一个地理点坐标
用法:var point = new BMap.Point(116.403, 39.915)

服务类 - Geocoder类

构造器:Geocoder()
作用:它的getPoint()方法可以获取用户的地址解析
getPoint()方法:getPoint(‘地址’,function(point){…},’城市’);
如果地址解析成功的话point形参指经纬地理坐标,否则为null
用法:

var geocoder=new BMap.Geocoder();
geocoder.getPoint("地址:北京天安门",function(point){...},"北京")

覆盖物类 - Marker类

构造器:Marker(point)
作用:创建地图上一个图像标注对象(突出显示目的点)
方法:marker.setAnimation(BMAP_ANIMATION_BOUNCE); - 作用:为图像标注添加动画效果
用法:

var marker=new BMap.Marker(point);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);

覆盖物类 - InfoWindow类

构造器:InfoWindow(‘地址信息内容’,’宽高等详细内容’)
作用:设置地图上弹出包含信息的窗口信息(点击目的位置弹出的提示信息窗口)
用法:

var info=new BMap.InfoWindow("地址:北京市西城区西绒线胡同",{
            width:250,
            height:60,
            title:"昌盛大厦"
        });

常用方法:

  • centerAndZoom(point,zoom);作用 - 初始化地图中心点和显示级别(参数point为一个基础类Point类的对象或字符串。zoom为显示级别,级别越高显示的距离越短、越清晰。一般情况值范围3-19,高清地图(移动端)值范围3-18。最合适为12/13)
  • enableScrollWheelZoom();作用 - 允许鼠标滚轮滚动放大或缩小地图的显示级别
  • setCurrentCity(city); 作用 - 设置地图城市(字符串形式)

示例:

var map=new BMap.Map("map");
map.centerAndZoom("北京",13);
map.enableScrollWheelZoom();
map.setCurrentCity("北京");

控件方法:

  • addControl(control);作用 - 添加控件实例(参数control为一个控件类对象)
  • removeControl(control);作用 - 移除控件实例(参数control为一个控件类对象)

示例:

map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}));
map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT}));
map.addControl(new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_RIGHT}));
map.addControl(new BMap.OverviewMapControl({isOpen:true}));

var overview = new BMap.OverviewMapControl({isOpen:true});
map.addControl(control);
map.removeControl(control);

效果:
HTML5 / JS实现百度地图基本常用功能_第1张图片

覆盖物方法:

  • addOverlay(overlay)作用 - 将覆盖物添加到地图中(参数为覆盖物类对象)
  • removeOverlay(overlay)作用 - 从地图中移除覆盖物(参数为覆盖物类对象)
  • openInfoWindow(InfoWindow,Point)作用 - 在地图上打开信息窗口(InfoWindow设置信息窗口(覆盖物类对象),在Point位置弹出窗口。)

示例:

var geocoder=new BMap.Geocoder();
geocoder.getPoint("北京市西城区西绒线胡同北京昌盛大厦",function(point){
    map.centerAndZoom(point,16);
    var marker=new BMap.Marker(point);
    map.addOverlay(marker);
    var info=new BMap.InfoWindow("地址:北京市西城区西绒线胡同",{width:250,height:60,title:"昌盛大厦"});
    marker.addEventListener("click",function(){
        map.openInfoWindow(info,point);
    });
},"北京");

效果:
HTML5 / JS实现百度地图基本常用功能_第2张图片HTML5 / JS实现百度地图基本常用功能_第3张图片

综合上述完整代码:

var map=new BMap.Map("map");    //创建百度地图对象
map.setCurrentCity("北京")        //设置地图城市
map.enableScrollWheelZoom();    //开启 鼠标滚轮改变地图显示级别 功能
map.enableDragging();       //开启鼠标拖拽功能
    //以下四句是地图的添加控件方法 和 控件实例
map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}));   //添加一个比例尺控件
map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT}));  //添加一个平移缩放控件
map.addControl(new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_RIGHT}));    //添加一个切换地图类型的控件
map.addControl(new BMap.OverviewMapControl({isOpen:true})); //添加一个地图缩略图控件
//移除控件的方法是:removeControl(control)

var geocoder=new BMap.Geocoder();   //Geocoder服务类,它的getPoint()方法可获取指定地理位置的经纬度坐标
geocoder.getPoint("北京市西城区西绒线胡同北京昌盛大厦",function(point){
    //point是一个基础类Point(lng,lat),以经、纬度来表示一个地理点坐标。
    //这里地址解析成功的话point形参指经纬地理坐标,否则为Null
    map.centerAndZoom(point,16);    //设置百度地图的中心点坐标 和 显示级别
    var marker=new BMap.Marker(point);  //创建地图上一个图像标注(覆盖物、在中心点point位置)
    map.addOverlay(marker);     //覆盖物方法,将覆盖物添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //为图像标注添加动画效果
    var info=new BMap.InfoWindow("地址:北京市西城区西绒线胡同",{
        width:250,
        height:60,
        title:"昌盛大厦"
    }); //创建弹出信息的窗口(覆盖物类)
    marker.addEventListener("click",function(){ //点击图像标注时弹出信息窗口
        map.openInfoWindow(info,point); //在指定点(此处为point中心点)弹出信息窗口
    });
},"北京");

效果:
HTML5 / JS实现百度地图基本常用功能_第4张图片

你可能感兴趣的:(HTML5)