百度地图自定义弹窗

学习笔记 yekong

wanjunshijie 2021-03-31 at 11.15.55@2x

js

var map = new BMap.Map("allmap");
                map.centerAndZoom(new BMap.Point(98.595668, 24.459327), 15);
                map.enableScrollWheelZoom();
                map.setMapStyle({
                    styleJson: [
                        {
                            "featureType": "all",
                            "elementType": "geometry",
                            "stylers": {
                                "hue": "#283a8f",
                                "lightness": 1,
                                "saturation": 91
                            }
                        },
                        {
                            "featureType": "water",
                            "elementType": "all",
                            "stylers": {
                                "color": "#ffffff"
                            }
                        }
                    ]
                });
                var data_info = [
                    [98.605668, 24.461000, "芒市豫发服装产业城"],
                    [98.595668, 24.466327, "国家电子商务进农村综合示范项目"],
                    [98.585668, 24.455000, "德宏州芒市职业教育中心新建项目"]
                ];
                for (var i = 0; i < data_info.length; i++) {
                    var myIcon = new BMap.Icon("images/Markericon.png", new BMap.Size(65, 79));
                    var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon: myIcon});
                    var sContent = "<div class='bminfox'><p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + data_info[i][2] + "</p>" +
                        "</div>";
                    map.addOverlay(marker);
                    addClickHandler(sContent, marker);
                }
                function addClickHandler(sContent, marker) {
                    marker.addEventListener("click", function (e) {
                            openInfo(sContent, e)
                        }
                    );
                }

                function openInfo(sContent, e) {
                    var p = e.target;
                    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                    var infoWindow = new BMap.InfoWindow(sContent);
                    map.openInfoWindow(infoWindow, point);
                }

scss


.BMap_pop > div:nth-child(0) {
  display: none;
}

.BMap_pop > div:nth-child(1) {
  display: none;
}

.BMap_pop > div:nth-child(2) {
  display: none;
}

.BMap_pop > div:nth-child(3) {
  display: none;
}

.BMap_pop > div:nth-child(4) {
  display: none;
}

.BMap_pop > div:nth-child(5) {
  display: none;
}

.BMap_pop > div:nth-child(6) {
  display: none;
}

.BMap_pop > div:nth-child(7) {
  display: none;
}

.BMap_pop > div:nth-child(8) {
  display: none;
}

//.BMap_pop > img:nth-child(1) {
//  display: none;
//}
.BMap_pop > img {
  display: none;
}

.BMap_pop > div:nth-child(9) {
  padding: 15px;
  height: auto !important;
  transition: all .35s ease-out;
  background: url("../images/popbg.png") no-repeat;
  background-size: 100% 100%;
  left: 171px !important;
  top: 80px !important;
}

.BMap_shadow {
  display: none !important;
}

.bminfox {

  p {
    line-height: 20px;
    color: #EBEFFF;
  }

  span {
    font-size: 16px;
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
  }
}

.BMap_pop .BMap_top {
  display: none;
}
喜欢