1.点个数太多导致加载缓慢的解决。

2.可视化区域内加载的解决。

3.自定义信息窗口解决。

4.区域/板块/商圈等的绘制功能解决。

基本包含了用到百度地图API会使用到的大部分常规性场景。（聚合点功能没写，公司暂不需要）

上两份代码。

var map = null;

var estateResult;

var landResult;

var myIcon1 = new BMap.Icon("../../Img/marker1.png", new BMap.Size(48, 48));

var myIcon2 = new BMap.Icon("../../Img/marker2.png", new BMap.Size(48, 48));

var myIcon3 = new BMap.Icon("../../Img/marker3.png", new BMap.Size(48, 48));

var local;

var searchText = null;

var points = [];

var center;

var leftBottom;

var rightTop;

var curLng;

var curLat;

var curType;

var leftlng;

var leftlat;

var rightlng;

var rightlat;

function InitialSearch() {

    local = new BMap.LocalSearch(map, {

        renderOptions: { map: map, panel: "mapSearchContainer" },

        onSearchComplete: function (results) {

            if (local.getStatus() == BMAP_STATUS_SUCCESS) {

                // 判断状态是否正确

                points = [];

                debugger

                for (var i = 0; i < results.getCurrentNumPois() ; i++) {

                    points.push(results.getPoi(i).point);

                }

            }

        }

    });

}

function InitialMap(lng, lat, type, flag) {

    curLng = lng;

    curLat = lat;

    curType = type;

    map = new BMap.Map("estatemapContainer", { minZoom: 13, maxZoom: 20 });

    var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });

    var top_left_navigation = new BMap.NavigationControl();

    var top_right_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL });

    map.addControl(top_left_control);

    map.addControl(top_left_navigation);

    map.addControl(top_right_navigation);

    map.enableDragging();

    map.enableScrollWheelZoom();

    var point = new BMap.Point(lng, lat);

    var marker;

    if (type == "land") {

        marker = new BMap.Marker(point, { icon: myIcon3 });

    }

    else {

        marker = new BMap.Marker(point, { icon: myIcon2 });

    }

    map.addOverlay(marker);

    marker.setAnimation(BMAP_ANIMATION_BOUNCE);

    map.centerAndZoom(new BMap.Point(lng, lat), 15);

    if (type == "land") {

        $("#EstateContent").hide();

        $("#LandContent").show();

    }

    else {

        $("#LandContent").hide();

        $("#EstateContent").show();

        if (flag == "have")

            $("#pageLandInfo").show();

        else

            $("#pageLandInfo").hide();

    }

}

function InitInfo(id) {

    $.ajax({

        url: "/Map/GetEstateData",

        data: { id: id },

        dataType: "json",

        type: "POST",

        async: false,

        success: function (result) {

            $("#estateName").text(result.EstateModel.ItemName);

            $("#floorArea").text(result.EstateModel.FloorArea + "(亩)");

            $("#developer").text(result.EstateModel.Developer);

            $("#agentor").text(result.EstateModel.Agentor);

            $("#firstDate").text(result.EstateModel.FirstOpenDate);

            $("#itemStatus").text(result.EstateModel.ItemStatus);

            if (result.EstateList != null) {

                var firstLi = '<li class="js_xf_map curr" onmouseover=TabMsg(this,"' + result.EstateModel.IsHardback + '","' + result.EstateModel.HouseSquare + '","' + result.EstateModel.TotalHouse + '") style="padding-top:3px;padding-bottom:0px;font-size: 14px;" zvalue="' + result.EstateModel.BuildingType + '">' + result.EstateModel.BuildingType + '</li>';

                $(".live-nav").append(firstLi);

                for (var i = 0; i < result.EstateList.length; i++) {

                    var li = "<li class='js_xf_map' onmouseover=TabMsg(this,'" + result.EstateList[i].IsHardback + "','" + result.EstateList[i].HouseSquare + "','" + result.EstateList[i].TotalHouse + "')  style='padding-top:3px;padding-left:1px;padding-bottom:0px;font-size: 14px;' zvalue='" + result.EstateList[i].BuildingType + "'>" + result.EstateList[i].BuildingType + "</li>";

                    $(".live-nav").append(li);

                }

                $("#autoLi").show();

                $("#buildLi").hide();

            }

            else {

                $("#autoLi").hide();

                $("#buildLi").show();

            }

            $("#buildType").text(result.EstateModel.BuildingType);

            $("#isHardback").text(result.EstateModel.IsHardback);

            $("#houseSquare").text(result.EstateModel.HouseSquare + "(m²)");

            $("#totalHouse").text(result.EstateModel.TotalHouse + "(套)");

            if (result.LandModel != null) {

                var str;

                if (result.LandModel.GetPeople.length > 14)

                    str = result.LandModel.GetPeople.substring(0, 12) + "..."

                else

                    str = result.LandModel.GetPeople;

                $(".getPeople").attr("title", result.LandModel.GetPeople);

                $(".getPeople").text(str);

                $(".price").text(result.LandModel.ContractAmount + "(万元)");

                $(".square").text(result.LandModel.NetSquareAcre + "(亩)");

                $(".floorPrice").text(result.LandModel.FloorPrice + "(元/m²)");

                $(".ratio").text(result.LandModel.PremiumRatio + "%");

                $(".developerSize").text(result.LandModel.DeveloperSize + "(万m²)");

                $("#pageLandInfo").show();

            }

            else {

                $("#pageLandInfo").hide();

            }

        }

    });

}

function TabMsg(obj, isHardback, houseSquare, totalHouse) {

    $(obj).addClass("curr").siblings().removeClass("curr");

    $("#isHardback").text(isHardback);

    $("#houseSquare").text(houseSquare + "(m²)");

    $("#totalHouse").text(totalHouse + "(套)");

}

function GetMapData() {

    $.ajax({

        url: "/Map/GetMapData",

        dataType: "json",

        type: "POST",

        async: false,

        success: function (result) {

            debugger

            estateResult = result.EstateList;

            landResult = result.LandList;

        },

    });

}

function CreateVisableZoom() {

    center = map.getBounds();

    leftBottom = center.getSouthWest();

    rightTop = center.getNorthEast();  

    leftlng = leftBottom.lng;

    leftlat = leftBottom.lat;

    rightlng = rightTop.lng;

    rightlat = rightTop.lat;

    debugger

    var isHaveLand = false;

    var isHaveEstate = false;

    for (var j = 0; j < landResult.length; j++) {

        if (landResult[j].Longitude > leftlng && landResult[j].Longitude < rightlng

            && landResult[j].Latitude > leftlat && landResult[j].Latitude < rightlat) {

            addCustomPoint(landResult[j]);

        }

    }

    for (var i = 0; i < estateResult.length; i++) {

        if (estateResult[i].Longitude > leftlng && estateResult[i].Longitude < rightlng

            && estateResult[i].Latitude > leftlat && estateResult[i].Latitude < rightlat) {

            addPoint(estateResult[i]);

        }

    }

    //debugger

    //if (points.length > 0) {

    //    for (var i = 0; i < points.length; i++) {

    //        var point = new BMap.Point(points[i].lng, points[i].lat);

    //        var marker = new BMap.Marker(point);

    //        map.addOverlay(marker);

    //    }

    //}

    //if (searchText != "" && searchText != null) {

    //    localSearch(searchText)

    //}

}

function addDragHandlerEstate() {

    map.addEventListener("dragend", function () {

        map.clearOverlays();

        CreateVisableZoom();

    });

}

function addMoveHandlerEstate() {

    map.addEventListener("moveend", function () {

        map.clearOverlays();

        CreateVisableZoom();

    });

}

function addZoomHandlerEstate() {

    map.addEventListener("zoomend", function () {

        map.clearOverlays();

        CreateVisableZoom();

    });

}

function addPoint(data) {

    var point = new BMap.Point(data.Longitude, data.Latitude);

    addMarker(point, data);

}

function addMarker(point, data) {

    var marker = new BMap.Marker(point, { icon: myIcon2 });

    if (data.ItemName != null && data.ItemName != "") {

        var label = new BMap.Label(data.ItemName, { offset: new BMap.Size(20, 4) });

        marker.setLabel(label);

    }

    addClickHandler(data, marker, 1)

    map.addOverlay(marker);

    if (data.Longitude == curLng && data.Latitude == curLat) {

        marker.setAnimation(BMAP_ANIMATION_BOUNCE);

    }

}

function addCustomPoint(data) {

    var point = new BMap.Point(data.Longitude, data.Latitude);

    addCustomMarker(point, data);

}

function addCustomMarker(point, data) {

    var marker = new BMap.Marker(point, { icon: myIcon3 });

    if (data.ItemView != null && data.ItemView != "") {

        var label = new BMap.Label(data.ItemView, { offset: new BMap.Size(20, 4) });

        marker.setLabel(label);

    }

    addClickHandler(data, marker, 0)

    map.addOverlay(marker);

    if (data.Longitude == curLng && data.Latitude == curLat) {

        marker.setAnimation(BMAP_ANIMATION_BOUNCE);

    }

}

function addClickHandler(data, marker, type) {

    marker.addEventListener("click", function (e) {

        map.panTo(e.point)

        if (type == 0) {

            var str;

            if (data.GetPeople != null && data.GetPeople.length > 14)

                str = data.GetPeople.substring(0, 12) + "..."

            else

                str = data.GetPeople;

            $("#getPeople").attr("title", data.GetPeople);

            $("#getPeople").text(str);

            $("#price").text(data.ContractAmount + "(万元)");

            $("#square").text(data.NetSquareAcre + "(亩)");

            $("#floorPrice").text(data.FloorPrice + "(元/m²)");

            $("#ratio").text(data.PremiumRatio + "%");

            $("#developerSize").text(data.DeveloperSize + "(万m²)");

            $("#LandContent").show();

            $("#EstateContent").hide();

        }

        else {

            $.ajax({

                url: "/Map/GetEstateData",

                data: { id: data.ID },

                dataType: "json",

                type: "POST",

                async: false,

                success: function (result) {

                    $("#estateName").text(result.EstateModel.ItemName);

                    $("#developer").text(result.EstateModel.Developer);

                    $("#agentor").text(result.EstateModel.Agentor);

                    $("#firstDate").text(result.EstateModel.FirstOpenDate);

                    $("#floorArea").text(result.EstateModel.FloorArea + "(亩)");

                    $("#itemStatus").text(result.EstateModel.ItemStatus);

                    if (result.EstateList != null) {

                        $(".live-nav").find("li").remove();

                        var firstLi = '<li class="js_xf_map curr" onmouseover=TabMsg(this,"' + result.EstateModel.IsHardback + '","' + result.EstateModel.HouseSquare + '","' + result.EstateModel.TotalHouse + '") style="padding-top:3px;padding-bottom:0px;font-size: 14px;" zvalue="' + result.EstateModel.BuildingType + '">' + result.EstateModel.BuildingType + '</li>';

                        $(".live-nav").append(firstLi);

                        for (var i = 0; i < result.EstateList.length; i++) {

                            var li = "<li class='js_xf_map' onmouseover=TabMsg(this,'" + result.EstateList[i].IsHardback + "','" + result.EstateList[i].HouseSquare + "','" + result.EstateList[i].TotalHouse + "')  style='padding-top:3px;padding-left:1px;padding-bottom:0px;font-size: 14px;' zvalue='" + result.EstateList[i].BuildingType + "'>" + result.EstateList[i].BuildingType + "</li>";

                            $(".live-nav").append(li);

                        }

                        $("#autoLi").show();

                        $("#buildLi").hide();

                    }

                    else {

                        $("#autoLi").hide();

                        $("#buildLi").show();

                    }

                    $("#buildType").text(result.EstateModel.BuildingType);

                    $("#isHardback").text(result.EstateModel.IsHardback);

                    $("#houseSquare").text(result.EstateModel.HouseSquare + "(m²)");

                    $("#totalHouse").text(result.EstateModel.TotalHouse + "(套)");

                    if (result.LandModel != null) {

                        var str;

                        if (result.LandModel.GetPeople.length > 14)

                            str = result.LandModel.GetPeople.substring(0, 12) + "..."

                        else

                            str = result.LandModel.GetPeople;

                        $(".getPeople").attr("title", result.LandModel.GetPeople);

                        $(".getPeople").text(str);

                        $(".price").text(result.LandModel.ContractAmount + "(万元)");

                        $(".square").text(result.LandModel.NetSquareAcre + "(亩)");

                        $(".floorPrice").text(result.LandModel.FloorPrice + "(元/m²)");

                        $(".ratio").text(result.LandModel.PremiumRatio + "%");

                        $(".developerSize").text(result.LandModel.DeveloperSize + "(万m²)");

                        $("#pageLandInfo").show();

                    }

                    else {

                        $("#pageLandInfo").hide();

                    }

                },

            });

            $("#EstateContent").show();

            $("#LandContent").hide();

        }

    });

}

function localSearch(searchText) {

    searchInBounds(searchText);

    //map.addEventListener("dragend", function () {

    //    local.searchInBounds(searchText, map.getBounds());

    //});

}

function searchInBounds(searchText) {

    var pStart = new BMap.Point(leftlng, leftlat);

    var pEnd = new BMap.Point(rightlng, rightlat);

    var bs = new BMap.Bounds(pStart, pEnd);

    local.searchInBounds(searchText, bs);

}

　　区域绘制功能：

var map = new BMap.Map('labelmapContainer', { minZoom: 12, maxZoom: 18 });

var poi = new BMap.Point(104.072385, 30.666158);

var objecrArr = [];

map.centerAndZoom(poi, 16);

map.enableScrollWheelZoom();

var IsEdit = false;

var drawType;

var overlays = [];

var markercomplete = function (overlay) {

    debugger

    setCenter(overlay.point.lng, overlay.point.lat);

}

var polygoncomplete = function (overlay) {

    overlays = [];

    overlays.push(overlay);

    getPoint();

    uploadPoints();

};

var styleOptions = {

    strokeColor: "rgb(239, 58, 58)",    //边线颜色。

    fillColor: "rgba(220, 58, 58, 0.18)",      //填充颜色。当参数为空时，圆形将没有填充效果。

    strokeWeight: 2,       //边线的宽度，以像素为单位。

    strokeOpacity: 1,    //边线透明度，取值范围0 - 1。

    fillOpacity: 0,      //填充的透明度，取值范围0 - 1。

    strokeStyle: 'solid',//边线的样式，solid或dashed。

    enableClicking: !1

}

var colorStyles = [

    {

        strokeColor: "#080808",

        fillColor: "rgba(220, 58, 58, 0.58)",

        strokeWeight: 2,

        strokeOpacity: 1,

        fillOpacity: 0,

        strokeStyle: 'solid',

        enableClicking: !1

    },

    {

        strokeColor: "#080808",

        fillColor: "rgba(52, 188, 239, 0.58)",

        strokeWeight: 2,

        strokeOpacity: 1,

        fillOpacity: 0,

        strokeStyle: 'solid',

    },

    {

        strokeColor: "#080808",

        fillColor: "rgba(156, 39, 176, 0.58)",

        strokeWeight: 2,

        strokeOpacity: 1,

        fillOpacity: 0,

        strokeStyle: 'solid',

    },

    {

        strokeColor: "#080808",    //边线颜色。

        fillColor: "rgba(76, 175, 80, 0.58)",      //填充颜色。当参数为空时，圆形将没有填充效果。

        strokeWeight: 2,       //边线的宽度，以像素为单位。

        strokeOpacity: 1,    //边线透明度，取值范围0 - 1。

        fillOpacity: 0,      //填充的透明度，取值范围0 - 1。

        strokeStyle: 'solid',//边线的样式，solid或dashed。

        enableClicking: !1

    },

    {

        strokeColor: "#080808",

        fillColor: "rgba(63, 81, 181, 0.58)",

        strokeWeight: 2,

        strokeOpacity: 1,

        fillOpacity: 0,

        strokeStyle: 'solid'

    },

    {

        strokeColor: "#080808",    //边线颜色。

        fillColor: "rgba(249, 217, 50, 0.58)",      //填充颜色。当参数为空时，圆形将没有填充效果。

        strokeWeight: 2,       //边线的宽度，以像素为单位。

        strokeOpacity: 1,    //边线透明度，取值范围0 - 1。

        fillOpacity: 0,      //填充的透明度，取值范围0 - 1。

        strokeStyle: 'solid',//边线的样式，solid或dashed。

        enableClicking: !1

    }

];

var drawingManager = new BMapLib.DrawingManager(map, {

    isOpen: false,

    enableDrawingTool: true,

    drawingToolOptions: {

        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置

        offset: new BMap.Size(5, 5), //偏离值

    },

    circleOptions: styleOptions, //圆的样式

    polylineOptions: styleOptions, //线的样式

    polygonOptions: styleOptions, //多边形的样式

    rectangleOptions: styleOptions //矩形的样式

});

drawingManager.addEventListener('polygoncomplete', polygoncomplete);

drawingManager.addEventListener('markercomplete', markercomplete);

function showArea() {

    map.clearOverlays();

    var poi = new BMap.Point(104.072385, 30.666158);

    var objecrArr = [];

    map.centerAndZoom(poi, 12);

    map.enableScrollWheelZoom();

    getPointsByZoom();

    addZoomHandlerEstate();

}

function showAllArea() {

    $.ajax({

        url: "/Map/GetAllArea",

        type: "Post",

        dataType: 'json',

        success: function (result) {

            if (result != null && result.length > 0) {

                map.setZoom(16);

                for (var i = 0; i < result.length; i++) {

                    debugger

                    var name = result[i].Name;

                    var pnts = [];

                    for (var j = 0; j < result[i].PointsList.length; j++) {

                        var point = new BMap.Point(result[i].PointsList[j].Longitude, result[i].PointsList[j].Latitude);

                        pnts.push(point);

                    }

                    var polygon = new BMap.Polygon(pnts, styleOptions);  //创建多边形

                    var center = new BMap.Point(result[i].Longitude, result[i].Latitude);

                    map.panTo(center);

                    var txt = "抚琴", mouseoverTxt = txt + " " + parseInt(Math.random() * 1000, 10) + "套";

                    var myCompOverlay = new ComplexCustomOverlay(center, name);

                    map.addOverlay(myCompOverlay);

                    map.addOverlay(polygon);   //增加多边形

                }

            }

            else {

                alert("获取失败,请联系管理员...");

            }

        }

    });

};

function setCenter(ln, la) {

    $.ajax({

        url: '/Map/SetAreaCenter',

        type: 'post',

        data: { name: $("#regionName").val(), level: $('#areaSelect option:selected').val(), lng: ln, lat: la },

        dataType: "json",

        success: function (result) {

            if (result.Status == true) {

                ShowFlashMsg('保存成功...', 'success');

                map.clearOverlays();

                drawingManager.close();

            }

            else {

                ShowFlashMsg('服务器内部错误...', 'error');

                drawingManager.close();

            }

        }

    });

}

function uploadPoints() {

    $.ajax({

        url: '/Map/UploadPoints',

        type: 'post',

        data: { name: $("#regionName").val(), points: JSON.stringify(objecrArr) },

        dataType: "json",

        success: function (result) {

            if (result.Status == true) {

                ShowFlashMsg('保存成功...', 'success');

                map.clearOverlays();

                drawingManager.close();

                $("#regionName").val("");

            }

            else {

                ShowFlashMsg('服务器内部错误...', 'error');

                drawingManager.close();

            }

        }

    });

}

function draw(type) {

    if ($("#regionName").val() == "") {

        $.messager.alert('提醒', '请输入区域名称......');

    }

    else {

        map.clearOverlays();

        drawingManager.open();

        if (type == BMAP_DRAWING_MARKER) {

            drawingManager.setDrawingMode(type);

        }

        else {

            $.ajax({

                url: "/Map/CheckCenterExist",

                type: 'Post',

                async: false,

                data: { name: $("#regionName").val() },

                dataType: 'json',

                success: function (result) {

                    if (result.Status == true) {

                        drawingManager.setDrawingMode(type);

                    }

                    else {

                        $.messager.alert('提醒', result.ErrorMsg);

                        drawingManager.close();

                    }

                }

            });

        }

    }

}

function clearAll() {

    for (var i = 0; i < overlays.length; i++) {

        map.removeOverlay(overlays[i]);

    }

    overlays.length = 0

}

function getPoint() {

    objecrArr = [];

    for (var i = 0; i < overlays.length; i++) {

        var overlay = overlays[i].getPath();

        for (var j = 0; j < overlay.length; j++) {

            var grid = overlay[j];

            objecrArr.push(grid);

        }

    }

}

var editPolygons = [];

var editPolygon = null;

function Editing() {

    editPolygons = [];

    if ($("#regionName").val() == "") {

        $.messager.alert('提醒', '请输入区域名称......');

    }

    else {

        $.ajax({

            url: "/Map/GetPolygonByName",

            type: "Post",

            data: { name: $("#regionName").val() },

            dataType: 'json',

            async: false,

            success: function (result) {

                if (result != null) {

                    map.clearOverlays();

                    map.setZoom(16);

                    var pnts = [];

                    for (var j = 0; j < result.PointsList.length; j++) {

                        var point = new BMap.Point(result.PointsList[j].Longitude, result.PointsList[j].Latitude);

                        pnts.push(point);

                    }

                    var center = new BMap.Point(result.Longitude, result.Latitude);

                    map.panTo(center);

                    editPolygon = new BMap.Polygon(pnts, styleOptions);  //创建多边形

                    editPolygons.push(editPolygon)

                    map.addOverlay(editPolygon);   //增加多边形

                }

                else {

                    $.messager.alert('提醒', '输入名称有误......');

                }

            }

        });

        for (var i = 0; i < editPolygons.length; i++) {

            editPolygons[i].enableEditing();

        }

    }

}

var editPoints = [];

function SaveEditing() {

    if ($("#regionName").val() == "") {

        $.messager.alert('提醒', '请输入区域名称......');

    }

    else {

        debugger

        var arr = editPolygon.getPath();

        $.ajax({

            url: "/Map/SaveEdit",

            type: "post",

            data: { name: $("#regionName").val(), points: JSON.stringify(arr) },

            dataType: "json",

            success: function (result) {

                if (result.Status == true) {

                    ShowFlashMsg('保存成功...', 'success');

                    map.clearOverlays();

                }

                else {

                    $.messager.alert('提醒', '保存失败,请联系管理员...');

                }

            }

        });

    }

}

function addZoomHandlerEstate() {

    map.addEventListener("zoomend", function () {

        map.clearOverlays();

        getPointsByZoom();

    });

}

function getPointsByZoom() {

    var zoom = map.getZoom();

    $.ajax({

        url: "/map/GetPointsByZoom",

        type: "post",

        data: { type: zoom },

        dataType: "json",

        success: function (result) {

            if (zoom == 12 || zoom == 13) {

                for (var i = 0; i < result.length; i++) {

                    var name = result[i].Name;

                    var borderData = "";

                    var points = [];

                    for (var j = 0; j < result[i].PointsList.length; j++) {

                        var p = new BMap.Point(result[i].PointsList[j].Longitude, result[i].PointsList[j].Latitude);

                        points.push(p)

                    }

                    var pol = new BMap.Polygon(points, colorStyles[i]);  //创建多边形

                    map.addOverlay(pol);

                    var center = new BMap.Point(result[i].Longitude, result[i].Latitude);

                    var myCompOverlay = new ComplexCustomOverlay(center, result[i].Name, borderData);

                    map.addOverlay(myCompOverlay);

                }

            }

            else {

                for (var i = 0; i < result.length; i++) {

                    debugger

                    var name = result[i].Name;

                    var borderData = "";

                    for (var j = 0; j < result[i].PointsList.length; j++) {

                        borderData = borderData + result[i].PointsList[j].Longitude + "," + result[i].PointsList[j].Latitude + ";";

                    }

                    var center = new BMap.Point(result[i].Longitude, result[i].Latitude);

                    var myCompOverlay = new ComplexCustomOverlay(center, result[i].Name, borderData);

                    map.addOverlay(myCompOverlay);

                }

            }

        }

    });

}

ComplexCustomOverlay.prototype = new BMap.Overlay();

ComplexCustomOverlay.prototype.initialize = function (map) {

    this._map = map;

    var div = this._div = document.createElement("div");

    div.style.position = "absolute";

    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);

    div.style.backgroundColor = "rgba(0, 172, 237, 0.88)";

    div.style.border = "1px solid transparent";

    div.style.borderRadius = "50%";

    div.style.height = "60px";

    div.style.width = "60px";

    div.style.lineHeight = "18px";

    div.style.cursor = "pointer";

    div.setAttribute("data", this._point.lng + "," + this._point.lat);

    div.setAttribute("data-border", this._data);

    var p = this._span = document.createElement("p");

    p.style.marginTop = "20px";

    p.style.paddingLeft = "2px";

    p.style.textAlign = "center";

    p.style.fontSize = "14px";

    p.style.color = "white";

    div.appendChild(p);

    p.appendChild(document.createTextNode(this._text));

    var that = this;

    div.onmouseover = function () {

        this.style.backgroundColor = "rgb(239, 58, 58)";

        var zoom = map.getZoom();

        if (zoom != 12 && zoom != 13) {

            displayPolygon(div.getAttribute("data-border"));

        }

        //var poi = new BMap.Point(div.getAttribute("data").split(',')[0], div.getAttribute("data").split(',')[1]);

        //map.panTo(poi);

    }

    div.onmouseout = function () {

        this.style.backgroundColor = "rgba(0, 172, 237, 0.88)";

        var zoom = map.getZoom();

        if (zoom != 12 && zoom != 13) {

            clearPolygon();

        }

    }

    map.getPanes().labelPane.appendChild(div);

    return div;

}

ComplexCustomOverlay.prototype.draw = function () {

    var map = this._map;

    var pixel = map.pointToOverlayPixel(this._point);

    this._div.style.left = pixel.x - 28 + "px";

    this._div.style.top = pixel.y - 28 + "px";

}

function ComplexCustomOverlay(point, text, data) {

    this._point = point;

    this._text = text;

    this._data = data;

}

var polygon;

function displayPolygon(arr) {

    var list = arr.split(';');

    var pnts = [];

    for (var i = 0; i < list.length; i++) {

        var point = new BMap.Point(list[i].split(',')[0], list[i].split(',')[1]);

        pnts.push(point);

    }

    polygon = new BMap.Polygon(pnts, styleOptions);  //创建多边形

    //alert(polygon)

    map.addOverlay(polygon);

}

function clearPolygon() {

    map.removeOverlay(polygon);

}

//覆盖物示例 end

　　实现效果：

百度地图API功能集锦的更多相关文章

  1. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例

    百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...

  2. 百度地图API功能

    984aca5bc78b070e59f34e230f11cf6d http://api.map.baidu.com/api?v=2.0&ak=您的密钥" <html> & ...

  3. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

  4. 百度地图 api 功能封装类 (ZMap.js) 新增管理事件功能 [源码下载]

    ZMap 功能说明 ZMap.js 本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地 ...

  5. 百度地图API 批量添加 带检索功能的信息窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 百度地图API 重新生成点聚合的功能

    百度点聚合用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能. http://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symbo ...

  7. 百度地图API的自动定位和搜索功能（移动端）

    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...

  8. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

  9. 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]

    ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...

随机推荐

  1. 1.2 ASSEMBLY LANGUAGE

    People are much happier moving up the ladder,socially or even technically.So our profession has move ...

  2. MATLAB plot 绘图的一些经验，记下来，facilitate future work

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2016/03/28 % 调整figure的位置scrsz = get(0,'ScreenSize'); % 这个命令是 ...

  3. 系统弹性概念[TODO]

    系统弹性 Shopify构建分布式可扩展应用的最佳实践 [编者的话]在构建大型分布式系统应用时,如何降低不同部分之间的依赖,增强系统的弹性,电商解决方案提供商 Shopify 给出了解决方法. 弹性矩 ...

  4. 小制作-css+html旋转木马

    源代码: <!DOCTYPE html><html><head>    <title></title>    <meta charse ...

  5. c语言数据结构之 插入排序

    算法:从第二个元素开始,与前一个元素进行比较,如果小于前一个元素,两者交换位置,一直循环到不再小为止 编译器:VS2013 代码 #include "stdafx.h"#inclu ...

  6. HTML5视频Video 音频Audio

    视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...

  7. sublime 中文乱码

      一.安装Package Control 使用Sublime Text2首先就要安装Package Control,这样就能使用丰富的插件包了 (1)访问Package Control站点按照提示复 ...

  8. redis入门笔记(2)

    redis入门笔记(2) 上篇文章介绍了redis的基本情况和支持的数据类型,本篇文章将介绍redis持久化.主从复制.简单的事务支持及发布订阅功能. 持久化 •redis是一个支持持久化的内存数据库 ...

  9. T-SQL - 访问远程数据库并对其数据表进行操作

    一.概述 很多时候我们需要在.NET应用程序中使用一条SQL语句来访问来自不同服务器.不同数据库中的不同的表,实现方法有很多.我们可以在.NET应用程序中建立数据访问层,使用ADO.NET Entit ...

  10. jquery'中的匿名函数

        //jquery'中的匿名函数 (function(){ alert("this is a test"); })(); //和这个基于jQuery的比较下: $(funct ...