百度地图常用功能的使用

来源：互联网发布：四川鹏业软件编辑：程序博客网时间：2024/04/29 14:03

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

一、资料

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是自己申请的一个秘钥）

</pre><p></p><p><span style="background-color: rgb(240, 240, 240);"></span><pre name="code" class="javascript">    <!--jquery-->    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>    <!--jquery-->    <!--百度地图-->    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tzAcIFZ5xCoRwm63NcBGfoVB"></script>    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />    <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>    <!--聚合-->    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer.js"></script>    <!--聚合-->    <!--百度地图-->

2、初始化地图

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

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

            // 百度地图API功能            var map = new BMap.Map("allmap");    // 创建Map实例            /*centerAndZoom(center:Point, zoom:Number)  none 设初始化地图。              <span style="color:#ff0000;"> 如果center类型为Point时，zoom必须赋值，范围3-19级，</span>若调用高清底图（针对移动端开发）时，              zoom可赋值范围为3-18级。如果<span style="color:#ff0000;">center类型为字符串时，比如“北京”，zoom可以忽略</span>，地图将自动根据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{    /// <summary>    /// Handler 的摘要说明    /// </summary>    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 = '<div style="margin:0;line-height:20px;padding:2px;">内容</div>';                markers.push(marker);               <span style="color:#ff0000;"> //使用闭包 这样内容才能显示的不同，否则全部都会只显示最后一个content1的内容</span>                (function (content1) {                    marker.addEventListener("click", function (e) {                        //创建检索信息窗口对象                        var searchInfoWindow = null;                        searchInfoWindow = new BMapLib.SearchInfoWindow(map, content1, {                            title: '信息<a target="_top" onclick="alert(1)" style="margin-left:5px;font-size:12px;line-height:30px;color:#3d6dcc;font-weight:normal;text-decoration:none;cursor:pointer;">详情»</a>',      //标题                            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 });

0 0