百度地图覆盖物marker标点海量点自定义图标悬浮窗点击事件区域加载

鼠标悬浮信息框
点击事件
1.海量点

        map = new BMap.Map(this.$refs.allmap); // 创建Map实例
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);// 初始化地图,设置中心点坐标和地图级别
                map.panTo(new BMap.Point(_this.shop.longitude, _this.shop.dimension)); //默认点  坐标值

                var points = [];  // 添加海量点数据
                _this.shopList0.forEach(function (item) {
                    points.push(new BMap.Point(item.shopCheckInfo.longitude, item.shopCheckInfo.dimension));
                })
                var options = {

                    shape: BMAP_POINT_SHAPE_CIRCLE,
                    color: '#ff0303'
                }
                var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection

                pointCollection.addEventListener('click', function (e) {
                    // 监听点击事件
                    _this.getShopInfoByCoordinate(e.point.lng, e.point.lat)
                });
                //鼠标移动事件
                pointCollection.addEventListener('mouseover', function (e) {
                    var pt = new BMap.Point(e.point.lng, e.point.lat);
                    for (let i = 0; i < _this.shopList0.length; i++) {
                        if (_this.shopList0[i].shopCheckInfo.longitude == e.point.lng && _this.shopList0[i].shopCheckInfo.dimension == e.point.lat) {
                            var opts = {
                                width: 300,     // 信息窗口宽度
                                height: 100,     // 信息窗口高度
                                title: '<h4>店铺信息</h4>', // 信息窗口标题
                            }
                            let str = "商铺名称:" + _this.shopList0[i].shopCheckInfo.shopname + "<br>";
                            str += "商铺地址:" + _this.shopList0[i].shopCheckInfo.district + _this.shopList0[i].shopCheckInfo.address + "<br>";
                            str += "联系人:" + _this.shopList0[i].shopCheckInfo.operatorname + "<br>";
                            str += "联系人电话:" + _this.shopList0[i].shopCheckInfo.creditno + "<br>";
                            var infoWindow = new BMap.InfoWindow(str, opts);  // 创建信息窗口对象
                        }
                    }
                    map.openInfoWindow(infoWindow, pt)
                })

                //鼠标移出事件
                pointCollection.addEventListener('mouseout', function (e) {
                    var pt = new BMap.Point(e.point.lng, e.point.lat);
                    var opts = {}
                    let str = "";
                    var infoWindow = new BMap.InfoWindow(str, opts);
                    map.closeInfoWindow(infoWindow, pt)
                })
                map.addOverlay(pointCollection);  // 添加Overlay
                      var mapStyle = {
                    features: ["road", "building", "water", "land"],//隐藏地图上的"poi",
                    style: "normal",
                };
                map.setMapStyle(mapStyle);
                map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

2.marker标点
自定义图标,悬浮窗,点击事件,区域加载

     // let width = document.body.clientWidth;
                        // $("allmap").css("zoom", 1/(Math.floor(width * 100 / 1920) / 100*0.9));
                        // $("#echarts").css("zoom", 10/9);
                        var pt = new BMap.Point(item.shopCheckInfo.longitude, item.shopCheckInfo.dimension);//默认点
                        //图标
                        var myIcon = new BMap.Icon(<%=request.getContextPath()%>"/images/kanban/1" + pngNum + ".png", new BMap.Size(21, 30));
                        var mk = new BMap.Marker(pt, {icon: myIcon});
                        map.addOverlay(mk);
                        mk.addEventListener("click", _this.attribute.bind(0, item.shopCheckInfo.id));
                        //mk.addEventListener("mouseover", _this.attribute.bind(0, item.shopCheckInfo.id));
                        //信息悬浮窗
                        var opts = {
                            width: 300,     // 信息窗口宽度
                            height: 100,     // 信息窗口高度
                            title: '<h4>店铺信息</h4>', // 信息窗口标题
                        }
                        let str = "商铺名称:" + item.shopCheckInfo.shopname + "<br>";
                        str += "商铺地址:" + item.shopCheckInfo.district + item.shopCheckInfo.address + "<br>";
                        str += "联系人:" + item.shopCheckInfo.operatorname + "<br>";
                        str += "联系人电话:" + item.shopCheckInfo.creditno + "<br>";
                        var infoWindow = new BMap.InfoWindow(str, opts);  // 创建信息窗口对象

                        mk.addEventListener("mouseover", function () {
                            map.openInfoWindow(infoWindow, pt); //开启信息窗口
                        });
                        mk.addEventListener("mouseout", function () {
                            map.closeInfoWindow(infoWindow, pt); //开启信息窗口
                        });
                        window.map = map;//将map变量存储在全局

                        _this.markers.push(mk);
                        var bounds = map.getBounds(),   //获取可视区域
                            SouthWest = bounds.getSouthWest(),   //可视区域左下角
                            NorthEast = bounds.getNorthEast();   //可视区域右上角
                        //处理显示与隐藏的marker
                        var data = boundsShow(SouthWest.lng, NorthEast.lng, SouthWest.lat, NorthEast.lat);
                        //把不在可视区域的maker隐藏起来
                        for (var i = 0, lengths = data.listhide.length; i < lengths; i++) {
                            data.listhide[i].hide();
                        }

                        function boundsShow(smlng, bglng, smlat, bglat) {
                            var listhide = [],//隐藏的数据
                                listshow = [];//显示的数据
                            for (var i = 0, lengths = _this.markers.length; i < lengths; i++) {
                                var _point = _this.markers[i].point;
                                //如果marker的经度 小于可视范围的最大经度大于可视范围的最小经度--
                                //并且marker的纬度 小于可是范围的最大纬度大于可视范围的最小纬度--则需要显示
                                if (smlng < _point.lng && _point.lng < bglng && smlat < _point.lat && _point.lat < bglat) {
                                    //显示
                                    listshow.push(_this.markers[i]);
                                    //如果之前被隐藏则显示
                                    if (!_this.markers[i].isVisible()) {
                                        _this.markers[i].show();
                                    }
                                } else {
                                    //不显示
                                    listhide.push(_this.markers[i]);
                                }
                            }
                            //返回显示的数量与隐藏的数量
                            return {
                                listshow: listshow,
                                listhide: listhide
                            }
                        }