百度地图API功能集锦

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" οnmοuseοver=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' οnmοuseοver=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" οnmοuseοver=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' οnmοuseοver=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

　　实现效果：

转载于:https://www.cnblogs.com/toloe/p/6244690.html