js 百度地图点聚合 自定义标注 自定义信息框

   //引入百度地图js
 <script type="text/javascript" src="//api.map.baidu.com/api?v=4.2&ak=xxxx"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" />
 <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
//点聚合api
    <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_min.js"></script>
//html部分
  <div id="newmap" class="Bottom2">
//css部分

   /*百度地图样式*/

   .BMap_bubble_title {
       color: #fff;
       font-size: 18px;
       /*font-weight: bold;*/
       text-align: left;
       background: transparent !important;
   }

   .BMap_pop .BMap_top {
       background: rgba(11, 33, 98, 0.79) !important;
       border: 0 !important;
   }

   .BMap_pop .BMap_center {
       /* width: 251px !important;*/
       border: 0 !important;
       background: rgba(11, 33, 98, 0.79) !important;
   }

   .BMap_pop .BMap_bottom {
       border: 0 !important;
       background: rgba(11, 33, 98, 0.79) !important;
   }

   .BMap_pop div:nth-child(3) {
       background: transparent !important;
   }

       .BMap_pop div:nth-child(3) div {
           border-radius: 7px;
           background: rgba(11, 33, 98, 0.79) !important;
           border: 0 !important;
       }

   .BMap_pop div:nth-child(1) {
       border-radius: 7px 0 0 0;
       background: transparent !important;
       border: 0 !important;
   }

       .BMap_pop div:nth-child(1) div {
           background: rgba(11, 33, 98, 0.79) !important;
       }

   .BMap_pop div:nth-child(5) {
       border-radius: 0 0 0 7px;
       background: transparent !important;
       border: 0 !important;
   }

       .BMap_pop div:nth-child(5) div {
           border-radius: 7px;
           background: #062264 !important;
       }

   .BMap_pop div:nth-child(7) {
       background: transparent !important;
   }

       .BMap_pop div:nth-child(7) div {
           border-radius: 7px;
           background: rgba(11, 33, 98, 0.79) !important;
       }

   .BMap_pop div:nth-child(8) div {
       /*border-radius:7px;*/
       background: rgba(11, 33, 98, 0.79) !important;
   }

   /*下面箭头替换为自己本地修改过的*/
   img[src="http://api0.map.bdimg.com/images/iw3.png"] {
       content: url('../img/Screen/arrow.png');
   }

   img[src="https://api.map.baidu.com/images/iw3.png"] {
       margin-top: -692px !important;
       filter: alpha(opacity=70);
       content: url('../img/Screen/arrow.png');
   }


//js部分
var arra = []
function List() {
    arra = [
        { title: '上海殷宇文化传播有限公司', point: '121.474000,31.230001', color: '#D81E06', img: 'https://www.chuangge.vip/jh/images/hong.png' },
        { title: '上海乐兴里企业管理有限公司', point: '121.466847,31.229036', color: '#1296DB', img: "https://www.chuangge.vip/jh/images/lan.png" },
    ]
    console.log("赋值")
}
List()
// 百度地图API功能
var map = new BMap.Map("newmap");  // 创建Map实例
map.enableScrollWheelZoom(true);
map.enablePinchToZoom();
map.enableDragging();

map.addControl(new BMap.OverviewMapControl());
//var point = new BMap.Point(121.474000, 31.230001);
//map.centerAndZoom(point, 15);



// 创建点坐标
var points = arra;
console.log(arra)
var markers = [];
var pt = null;

//    [
//    { title: '标注111111111', point: '121.474000,31.230001', color: '#D81E06', img: 'https://www.chuangge.vip/jh/images/hong.png' },
//    { title: '标注22222222222', point: '121.466847,31.229036', color: '#1296DB', img: "https://www.chuangge.vip/jh/images/lan.png" },
//];

// 初始化地图, 设置中心点坐标和地图级别
var point = new BMap.Point(points[0].point.split(',')[0], points[0].point.split(',')[1]);
map.centerAndZoom(point, 5);
// 创建小车图标

// 遍历点数组，添加标注
for (var i = 0; i < points.length; i++) {
    var myIcon = new BMap.Icon(points[i].img, new BMap.Size(25, 25));
    var opts = {
        position: new BMap.Point(points[i].point.split(',')[0], points[i].point.split(',')[1]), // 指定文本标注所在的地理位置
        offset: new BMap.Size(30, -30) // 设置文本偏移量
    };
    // 创建文本标注对象
    var label = new BMap.Label(points[i].title, opts);
    // 自定义文本标注样式
    label.setStyle({
        color: '#fff',
        background: points[i].color,
        borderRadius: '5px',
        borderColor: '#ccc',
        padding: '10px',
        fontSize: '10px',
        height: '10px',
        lineHeight: '10px',
        fontFamily: '微软雅黑'
    });
    
    var marker = new BMap.Marker(new BMap.Point(points[i].point.split(',')[0], points[i].point.split(',')[1]), {
        icon: myIcon
    });
    //map.addOverlay(marker);
    pt = new BMap.Point(points[i].point.split(',')[0], points[i].point.split(',')[1]);
    markers.push(marker);

    // 可选：添加标注窗口
    addInfoWindow(map, marker, points[i].title,'', label);
}
//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers })
// 可选：添加信息窗口函数
function addInfoWindow(map, marker, title, image, label) {
    var opts = {
        width: 250,     // 信息窗口宽度
        height: 200,     // 信息窗口高度
        title: title // 信息窗口标题
    };
    // 创建信息窗口对象
    var infoWindow = new BMap.InfoWindow(`<div style="color:#fff"><span>地址：</span><span>兴国路408号</span></div><div style="color:#fff"><span>联系人：</span><span>江晓宇</span></div><div style="color:#fff"><span>联系电话：</span><span>18355558963</span></div><div style="color:#fff"><span>行业：</span><span>物业</span></div><div style="color:#fff"><span>风险等级：</span><span>A级</span></div><input type="button" value="详情"></input>`, opts);
    // 打开信息窗口
    marker.openInfoWindow(infoWindow);

    // 监听标注对象的点击事件，打开信息窗口
    marker.addEventListener("click", function () {
        this.openInfoWindow(infoWindow);
        map.addOverlay(label);
    });
}


//此种方法添加为三种类型，地图/卫星/三维，其中切换至三维时无法显示地图，也无官方文档所说的切换城市* 不建议采用此种方法
map.addControl(new BMap.MapTypeControl());
//添加地图控件, 矢量图和卫星图。 矢量图为卫星地图+矢量标注
map.addControl(new BMap.MapTypeControl({
    mapTypes: [
        BMAP_NORMAL_MAP, //矢量图
        //BMAP_SATELLITE_MAP,//卫星图， 此选项不起作用
        BMAP_HYBRID_MAP //混合图， 卫星+矢量图中的街道和标注
    ]
}));

效果图