百度地图常用功能的使用

项目中用到了百度地图，整理一下常用的方便查阅：

一、资料

1.概述JavaScript API

http://lbsyun.baidu.com/index.php?title=jspopular

2.demo

http://developer.baidu.com/map/jsdemo.htm

3.工具开源库（如鼠标点击后计算范围、聚合效果等）

http://developer.baidu.com/map/jsdemo.htm

二、常用的功能及实现

1、引入常用的资源包（引入http://api.map.baidu.com/api?v=2.0&ak=tzAcIFZ5xCoRwm63NcBGfoVB 时ak是自己申请的一个秘钥）

2、初始化地图

$(function(){ /*所有js代码放入*/});

2.1. 创建地图对象设置中心点以及缩放的级别zoom

            // 百度地图API功能
            var map = new BMap.Map("allmap");    // 创建Map实例
            /*centerAndZoom(center:Point, zoom:Number)  none 设初始化地图。 
              如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，
              zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别。 
            */
            //map.centerAndZoom(new BMap.Point(113.195425, 39.657158), 10);  //初始化地图,设置中心点坐标和地图级别
            map.centerAndZoom("北京市");
        });

2.2. 插入缩放定位等控件

 var navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                // 启用显示定位
                enableGeolocation: true,
                showZoomInfo: true,
            });
            map.addControl(navigationControl);

2.3.开启滚轮缩放及禁用双击放大

   map.enableScrollWheelZoom();     //开启鼠标滚轮缩放
   map.disableDoubleClickZoom(true);//禁用双击放大。 

2.4.限制地图显示区域，超出显示区域自动修改回限制区域，参数需要两个点的坐标，即限制区域地图的左上角和右下角坐标

  //限制区域
    var b = new BMap.Bounds(new BMap.Point(111.822527, 40.296748), new BMap.Point(114.566024,39.043834));
    try {
            BMapLib.AreaRestriction.setBounds(map, b);
        } catch (e) {
            alert(e);
        }

2.5.添加行政区域（县、区级别）

function getBoundary() {
                var bdary = new BMap.Boundary();
                bdary.get("西安市雁塔区", function (rs) {       //获取行政区域
                    map.clearOverlays();        //清除地图覆盖物       
                    var count = rs.boundaries.length; //行政区域的点有多少个
                    if (count === 0) {
                        alert('未能获取当前输入行政区域');
                        return;
                    }
                    var pointArray = [];
                    for (var i = 0; i < count; i++) {
                        var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
                        map.addOverlay(ply);  //添加覆盖物
                        pointArray = pointArray.concat(ply.getPath());
                    }
                    map.setViewport(pointArray);    //调整视野                 
                });
            }

2.6结合后台获得制定区域并画出

 ShowArea();
            //读取已有区域
            function ShowArea() {

                $.post("Handler.ashx?action=getAreaData", "", function (data, status) {
                    //var data = eval(dataJSON);
                    var points = GetPointsArray(data);
                    var polygon1 = new BMap.Polygon(points, { strokeColor: "blue", fillColor: "#f0979f", strokeWeight: 2, strokeOpacity: 0.5, fillOpacity: 0.3 });  //创建多边形
                    map.addOverlay(polygon1);   //增加多边形
                });
            }
            function GetPointsArray(points) {
                var pointsArray = points.split(";");
                var result = new Array();
                for (var i = 0; i < pointsArray.length; i++) {
                    result[i] = new BMap.Point(pointsArray[i].split(",")[0], pointsArray[i].split(",")[1]);
                }

                return result;
            }

2.7.后台获得区域（点的集合）（使用ajax与一般处理程序）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication3
{
    /// 

    /// Handler 的摘要说明
    /// 
    public class Handler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string action=context.Request["action"];
            switch(action)
            {
                case "getAreaData":
                    GetAreaData(context);
                    break;

            }
        }

        public void GetAreaData(HttpContext context)
        {
            string s = "108.860872, 34.258506;108.831975, 34.258587;108.827325, 34.254061;108.82198, 34.253861;108.821721, 34.242147;108.82502, 34.242241;108.825366, 34.235732;108.828081, 34.235904;108.828549, 34.225515;108.841104, 34.22704;108.836877, 34.210519;108.839338, 34.205291;108.852262, 34.206639;108.852829, 34.18584;108.875588, 34.185636;108.875624, 34.177398;108.980798, 34.177959;109.00823, 34.180186;109.022781, 34.185512;109.039102, 34.182088;109.060345, 34.191182;109.053019, 34.212803;109.056843, 34.243072;109.054189, 34.257263;109.033871, 34.257004;109.036981, 34.256214;109.037215, 34.240337;109.027373, 34.240809;109.027372, 34.243714;109.022632, 34.243735;109.02261, 34.248791;109.002924, 34.248887;108.971729, 34.236415;108.938526, 34.235527;108.897292, 34.253332;108.89572, 34.257881;108.860872, 34.258506";
            context.Response.Write(s);
        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

2.8. 点聚合及批量弹出窗口

 // 百度地图API功能
            var map = new BMap.Map("allmap");
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 4);
            map.enableScrollWheelZoom();

            var MAX = 10;
            var markers = [];
            var pt = null;
            var i = 0;
            for (; i < MAX; i++) {
                pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
                var marker = new BMap.Marker(pt);
                markers.push(marker);
                var content1 = '
内容
';
                markers.push(marker);
                //使用闭包 这样内容才能显示的不同，否则全部都会只显示最后一个content1的内容
                (function (content1) {
                    marker.addEventListener("click", function (e) {

                        //创建检索信息窗口对象
                        var searchInfoWindow = null;
                        searchInfoWindow = new BMapLib.SearchInfoWindow(map, content1, {
                            title: '信息详情»',      //标题
                            width: 250,             //宽度
                            height: 200,              //高度
                            panel: "panel",         //检索结果面板
                            enableAutoPan: true,     //自动平移
                            enableSendToPhone: false,//百度发送短信图标
                            searchTypes: [
                                //BMAPLIB_TAB_SEARCH,   //周边检索
                                //BMAPLIB_TAB_TO_HERE,  //到这里去
                                //BMAPLIB_TAB_FROM_HERE //从这里出发
                            ]
                        });

                        searchInfoWindow.open(e.target);

                    });
                })(content1)
            }
       
            //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
            var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });