实验指导书

实验指导书-实验四 百度地图Java Script开发

---

按照下列步骤，使用 Sublime编辑器 或者Notepad++编辑器或者你喜欢的IDE（Visual Studio等），实现苏州地图页面。

注册百度账号

前往http://lbsyun.baidu.com/apiconsole/key?application=key申请自己的密钥，注意选择浏览器端。

构建HTML页面

使用最新的符合HTML5规范的文档声明：

在文档声明后添加html，head，body标签，构成最基本的HTML页面：

在标签后添加meta标签，meta标签主要说明的是页面的元数据信息，例如编码方式等信息。

增加map容器

在标签后增加map容器，div标签是容器，这里作为展示Map的区域。

在mapDiv之前，添加header div，放置地址输入框，地理编码定位按钮，以及地图点击事件的按钮。

    请输入地址：
    
    
    
    

在mapDiv之后，添加footer div，放置关键字输入框，搜索按钮，以及搜索结果的div。

    请输入搜索关键字：
    
    
    

注意以上两个输入框有id属性，这是方便后面获取用户输入的信息。
注意以上input标签结束的/，这类标签称为空标签，按标准规则需要添加/，而不需要。

引用百度API

在meta标签后引用百度API

密钥换为在第一步申请的密钥字符串。

引用css样式

在script标签后，增加css样式

其中body，html为CSS选择器（selector），表示HTML的标签。
以#开头的为id选择器，后面紧跟的一般是HTML元素中的ID，{}中的为样式信息，这里设置mapDiv的高度为页面高度的80%，resultPanel高度为20%，这样可以根据显示器分辨率的不同而自动缩放大小。当然也可以直接设置像素信息，比如设置为500px，表示高度为500个像素，注意500和px中间不能有空格。
在后增加title，是显示在浏览器窗口中的页面标题信息。

添加地图

在标签的上面增加js脚本

BMap为命名空间，位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。 注意在调用此构造函数时应确保容器元素已经添加到地图上。
使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中120.63表示经度，31.30表示纬度，这里是苏州的经纬度信息。
BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。
默认情况下地图不支持鼠标滚轮缩放操作，因为这样可能会影响整个页面的用户体验，这里希望在地图中使用鼠标滚轮控制缩放，则调用map.enableScrollWheelZoom方法来开启。
此时在浏览器中运行页面，可看到苏州市地图。

增加地图类型控件

在map.enableScrollWheelZoom后面增加地图类型控件

map.addControl(new BMap.MapTypeControl());   //添加地图类型控件,三维不可用
map.setCurrentCity("苏州");          // 设置地图显示的城市 此项是必须设置的

注意地图类型控件中有当前有街道地图、卫星影像地图和三维地图三个选项，但目前三维不可用，此外地图类型控件必须设置地图显示的城市。此控件默认添加在地图右上角。

添加地图导航控件

继续添加地图导航控件，此控件默认添加在地图左上角。

map.addControl(new BMap.NavigationControl());

添加比例尺控件

var scaleCtrlOpts = {anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(50, 30)};
map.addControl(new BMap.ScaleControl(scaleCtrlOpts));

传给ScaleControl构造函数的scaleCtrlOpts表示的是控件的设置，这里设置其停靠位置（anchor）和距离停靠点的距离（BMap.Size ：x，y方向）。

添加交通流量控件

该控件是百度地图的一个开源库，详见http://lbsyun.baidu.com/index.php?title=open/library
在百度地图API的前后加入该控件的样式表和其JS文件

在比例尺控件之后，加入交通流量控件，并设置其停靠在页面右下角。

var trafficCtrl = new BMapLib.TrafficControl();  
trafficCtrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);    
map.addControl(trafficCtrl);

注意setAnchor方法从Control基类继承而来，TrafficControl等上述控件都继承了Control抽象基类。

添加定位控件

var geolocationControl = new BMap.GeolocationControl();

添加定位控件事件响应函数，locationSuccess为定位成功事件，从响应函数参数中获取定位的地点信息，locationError为定位失败信息，输出失败消息。

geolocationControl.addEventListener("locationSuccess", function(e){
    // 定位成功事件
    var address = '';
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    alert("当前定位地址为：" + address);
  });

geolocationControl.addEventListener("locationError",function(e){
    // 定位失败事件
    alert(e.message);
  });

添加定位控件

map.addControl(geolocationControl);

添加地理编码功能

定位按钮增加onclick属性,按钮响应geoCoding函数

实现geoCoding函数

function geoCoding() {
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上,并调整地图视野
    var addressStr = document.getElementById("address").value;
    myGeo.getPoint(addressStr, function(point){
      if (point) {
        map.centerAndZoom(point, 16);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);
      } else {
        alert("您选择地址没有解析到结果!");
      }
    }, "苏州市");
  }

document.getElementById由DOM获得HTML元素，再由value属性获得用户输入的地址信息，getPoint方法根据地址信息进行地理编码，将其转换为经纬度坐标显示在地图上，对该地址利用Marker点符号在地图上进行展示。
增加点击Marker弹出信息窗口功能，在map.addOverlay(marker)后增加如下代码，

var opts = {
  width : 200,     // 信息窗口宽度
  height: 100,     // 信息窗口高度
  title : "地址：" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow(addressStr, opts);  // 创建信息窗口对象 
marker.addEventListener("click", function(){          
map.openInfoWindow(infoWindow, point); //开启信息窗口
});

为了在增加Marker符号前清除地图上的叠加物，在geoCoding函数开头处增加代码

map.clearOverlays();

添加本地搜索功能

搜索按钮增加onclick属性,按钮响应search函数。

实现search函数

 function search() {
    map.clearOverlays();
    var local = new BMap.LocalSearch(map, {
      renderOptions: {map: map, panel:"resultPanel"},
      pageCapacity: 5
    });
    var keyWord = document.getElementById("keyWord").value;
    local.search(keyWord);
  }

LocalSearch类实现本地搜索功能，其中renderOptions，表示搜索执行的范围是map，搜索结果展现在resultPanel 元素上。
将关键字传入local.search函数执行搜索。

增加地图点击事件及其响应函数

下列按钮增加onclick属性

showInfo函数由响应函数的参数显示其经纬度信息

function showInfo(e){
    alert("经纬度为(" + e.point.lng + ", " + e.point.lat + ")");  
  }

addClick函数和removeClick函数分别增加和移除对click事件的响应

function addClick(){
    map.addEventListener("click", showInfo);
}
function removeClick(){
    map.removeEventListener("click", showInfo);
}