【百度地图】- 学习.1

创建地图实例

var map = new BMap.Map("container");          // 创建地图实例  

位于 BMap 命名空间下的 Map 类表示地图，通过 new 操作符可以创建一个地图实例。其参数可以是元素id 也可以是元素对象。注意在调用此构造函数时应确保容器元素已经添加到地图上。

 

创建点坐标

var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  

这里我们使用 BMap 命名空间下的 Point 类来创建一个坐标点。 Point 类描述了一个地理坐标点，其中116.404表示经度， 39.915表示纬度。

 

地图初始化

map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别 

在创建地图实例后，我们需要对其进行初始化， BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。

 

控件

百度地图上负责与地图交互的 UI 元素称为控件。百度地图 API 中提供了丰富的控件，您还可以通过 Control类来实现自定义控件。
地图 API 中提供的控件有：
  Control： 控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
  NavigationControl：地图 平移缩放控件， PC 端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
  OverviewMapControl： 缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
  ScaleControl： 比例尺控件，默认位于地图左下方，显示地图的比例关系。
  MapTypeControl： 地图类型控件，默认位于地图右上方。
  CopyrightControl： 版权控件，默认位于地图左下方。
  GeolocationControl： 定位控件，针对移动端开发，默认位于地图左下方

 

向地图添加控件

可以使用 Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：

map.addControl(new BMap.NavigationControl()); //添加地图平移缩放控件

例：

var map = new BMap.Map("container");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

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

 

自定义控件

百度地图 API 允许您通过继承 Control 来创建自定义地图控件。
要创建可用的自定义控件，您需要做以下工作：
定义一个自定义控件的构造函数。
设置自定义控件构造函数的 prototype 属性为 Control 的实例，以便继承控件基类。
实现 initialize() 方法并提供 defaultAnchor 和 defaultOffset 属性。

    // 定义一个控件类，即function    
    function ZoomControl() {
        // 设置默认停靠位置和偏移量  
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new BMap.Size(10, 10);
    }
    // 通过JavaScript的prototype属性继承于BMap.Control   
    ZoomControl.prototype = new BMap.Control();

初始化自定义控件

当调用map.addControl()方法添加自定义控件时，API会调用该对象的initialize()方法用来初始化控件，您需要实现此方法并在其中创建控件所需的DOM元素，并添加DOM事件。所有自定义控件中的DOM元素最终都应该添加到地图容器（即地图所在的DOM元素）中去，地图容器可以通过map.getContainer()方法获得。最后initialize()方法需要返回控件容器的DOM元素。

    // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
    // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
    ZoomControl.prototype.initialize = function (map)
    {
        // 创建一个DOM元素   
        var div = document.createElement("div");
        // 添加文字说明    
        div.appendChild(document.createTextNode("放大2级"));
        // 设置样式    
        div.style.cursor = "pointer";
        div.style.border = "2px solid gray";
        div.style.backgroundColor = "white";
        // 绑定事件，点击一次放大两级    
        div.onclick = function (e) {
            map.zoomTo(map.getZoom() + 2);
        }
        // 添加DOM元素到地图中   
        map.getContainer().appendChild(div);
        // 将DOM元素返回  
        return div;
    }

添加自定义控件

添加自定义控件与添加其他控件方法一致，调用map.addControl()方法即可。

    // 创建控件实例    
    var myZoomCtrl = new ZoomControl();

// 添加到地图当中
map.addControl(myZoomCtrl);