百度地图开发自定义信息窗口openInfoWindow样式

 

 

//-------------地图默认弹框
/*地图标题 infoWindow*/
// .BMap_bubble_title {
//     color: #fff;
//     font-size: 16px;
//     font-weight: bold;
//     text-align: left;
//     background: transparent !important;
// }

.BMap_pop .BMap_top {
    background: rgba(7,44,76, .8) !important;
    border: 0 !important;
}

.BMap_pop .BMap_center {
    // width: 281px !important;
    border: 0 !important;
    background: rgba(7,44,76, .8) !important;
}

.BMap_pop .BMap_bottom {
    border: 0 !important;
    background: rgba(7,44,76, .8) !important;
}

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

.BMap_pop div:nth-child(3) div {
    border-radius: 3px;
    background: rgba(7,44,76, .8) !important;
    border: 0 !important;
}

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

.BMap_pop div:nth-child(1) div {
    background: rgba(7,44,76, .8) !important;
}

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

.BMap_pop div:nth-child(5) div {
    border-radius: 3px;
    background: rgba(7,44,76, .8) !important;
}

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

.BMap_pop div:nth-child(7) div {
    border-radius: 3px;
    background: rgba(7,44,76, .8) !important;
}

/*替换箭头*/
img[src="http://api.map.baidu.com/images/iw3.png"] {
    // content: url('../images/iw3.png');
    width:1px !important;
    height: 1px !important;
}

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

 

<template>
  <div class="baidu-map-con" id="location" ref="location"></div>
</template>
<script>
import { video1Hls, video1Rtmp } from "@/utils/video3d/videoData.js";
import { listCusDevices } from "@/api/indexPage.js";
import szgc from "@/assets/kj/icon/btnszgc.png";

export default {
  components: {},
  data() {
    return {
      video1Hls,
      mapJson: [
        {
          featureType: "land",
          elementType: "geometry.fill",
          stylers: {
            color: "#08304B",
          },
        },
        {
          featureType: "land",
          elementType: "geometry.stroke",
          stylers: {
            color: "#021019",
          },
        },
        {
          featureType: "land",
          elementType: "labels.text.fill",
          stylers: {
            color: "#847F7F",
          },
        },
        {
          featureType: "water",
          elementType: "geometry.fill",
          stylers: {
            color: "#021019",
          },
        },
        {
          featureType: "water",
          elementType: "geometry.stroke",
          stylers: {
            color: "#08304B",
          },
        },
        {
          featureType: "green",
          elementType: "geometry.fill",
          stylers: {
            color: "#b0d3dd",
          },
        },
        {
          featureType: "green",
          elementType: "geometry.stroke",
          stylers: {
            color: "#33A1C9",
          },
        },
        {
          featureType: "building",
          elementType: "geometry.fill",
          stylers: {
            color: "#021019",
            visibility: "off",
          },
        },
        {
          featureType: "building",
          elementType: "geometry.stroke",
          stylers: {
            color: "",
            visibility: "off",
          },
        },
        {
          featureType: "highway",
          elementType: "geometry.fill",
          stylers: {
            color: "#a6cfcf",
          },
        },
        {
          featureType: "highway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#7dabb3",
          },
        },
        {
          featureType: "highway",
          elementType: "labels.text.fill",
          stylers: {
            color: "#8B4513",
          },
        },
        {
          featureType: "highway",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#33A1C9",
          },
        },
        {
          featureType: "arterial",
          elementType: "geometry.fill",
          stylers: {
            color: "#a6cfcf",
          },
        },
        {
          featureType: "arterial",
          elementType: "geometry.stroke",
          stylers: {
            color: "#a6cfcf",
          },
        },
        {
          featureType: "arterial",
          elementType: "labels.text.fill",
          stylers: {
            color: "#8B4513",
          },
        },
        {
          featureType: "arterial",
          elementType: "labels.text.stroke",
          stylers: {
            color: "#8B4513",
          },
        },
        {
          featureType: "local",
          elementType: "geometry.fill",
          stylers: {
            color: "#f1f1f1",
          },
        },
        {
          featureType: "railway",
          elementType: "geometry.fill",
          stylers: {
            color: "",
          },
        },
        {
          featureType: "railway",
          elementType: "geometry.stroke",
          stylers: {
            color: "",
          },
        },
        {
          featureType: "subway",
          elementType: "geometry.fill",
          stylers: {
            color: "#33A1C9",
          },
        },
        {
          featureType: "subway",
          elementType: "geometry.stroke",
          stylers: {
            color: "#33A1C9",
          },
        },
        {
          featureType: "boundary",
          elementType: "geometry.fill",
          stylers: {
            color: "#33A1C9",
          },
        },
        {
          featureType: "boundary",
          elementType: "geometry.stroke",
          stylers: {
            color: "#f1f1f1",
          },
        },
        {
          featureType: "poilabel",
          elementType: "labels.text.fill",
          stylers: {
            color: "#f5f5f5",
            visibility: "off",
          },
        },
        {
          featureType: "poilabel",
          elementType: "labels.text.stroke",
          stylers: {
            color: "",
            visibility: "off",
          },
        },
        {
          featureType: "manmade",
          elementType: "all",
          stylers: {
            visibility: "off",
          },
        },
        {
          featureType: "districtlable",
          elementType: "labels.text.fill",
          stylers: {
            color: "#00affe",
          },
        },
        {
          featureType: "districtlable",
          elementType: "labels.text.stroke",
          stylers: {
            color: "",
          },
        },
        {
          //文字
          featureType: "all",
          elementType: "labels.text.fill",
          stylers: {
            color: "#009AC1",
            // color: "#2da0c6",
            visibility: "on",
          },
        },
      ],
      list1: [
        {
          lat: "120.32137",
          lng: "29.921048",
          type: 1,
          name: "三峰实业有限公司",
          location: "浙江省诸暨市店口镇解放路696号",
          production:
            "三峰实业自1983年创业以来，伴随着中国改革开放的蓬勃发展，" +
            "发展为中国家用燃气具部件知名企业，曾取得中国500位信用示范企业、" +
            "浙江省优秀民营企业、浙江省著名商标、浙江名牌产品、浙江省专利示范企业、" +
            " 浙江省高新技术企业等多项殊荣。公司始终贯彻“诚信互利、知识为本”的经营理念，" +
            "坚持“三峰部品、无限创造”的企业精神，秉承“专业化生产、系列化发展”的经营方针。" +
            "传统制造创新与转型升级并举，于2011年成功组建了智能安防领域的浙江三峰电子有限公司，" +
            "现已形成了铜制品、铝制品、钣金件、电子品四个生产板块，" +
            "主要应用于燃气热水器和壁挂炉的水路控制系统、气路控制系统、" +
            "燃气灶燃烧系统、电子电路及报警系统等系列产品。目前，" +
            "公司已与林内、能率、方太、老板、阿里斯顿、菲斯曼、松下、迪森、博世、" +
            "AGA等国内外顶尖企业建立了长期的合作关系。过去，三峰在找标杆，" +
            "学标杆的探索和求真中，借鉴标杆企业的成功经验与自主创新，以客户为依托，" +
            "自主研发拥有知识产权的高效节能环保产品，推动了燃气具行业的进步，" +
            "创造了一条适合三峰的发展之路。现在，面对全球化挑战，三峰要拉高标杆，" +
            "争创行业标杆，以工匠精神致力于做专、做精、做久，" +
            "这才是打造未来百年三峰的必由之路。",
          jingying: "铜制品、铝制品、钣金件、电子品",
          cltime: "1983",
          area: "30亩",
          typecompany: "src11",
        },
        {
          lat: "120.305304",
          lng: "29.891949",
          type: 1,
          name: "浙江宁巍机械科技有限公司",
          location: "浙江省绍兴市诸暨市S103(解放南路)",
          production:
            "浙江宁巍机械科技有限公司于2011年12月经批准成立，" +
            "法人代表王吉龙。是一家从事精密铸造、机械加工生产及自动化设备研发制造、" +
            "销售于一体的生产制造型企业。公司位于诸暨市店口镇解放湖高新产业园区，" +
            "注册资本2000万元，占地面积30亩。总资产1.5亿元，年生产产值1.35亿元，" +
            "上缴税收400余万元。公司由三个事业部组成，分别为自动化设备及机器人研发、" +
            "生产、销售的事业一部，机械零部件设计、生产、销售的事业二部，铜合金精密铸造、" +
            "加工的事业三部。现有员工200余人，大专及以上人员45名，占职工总数的22%，" +
            "直接从事技术开发的科技人员25名，占职工总数的12%，公司有中级职称及以上技术人员5名，" +
            "人员配备优良、专业配置合理。公司拥有先进的机加工设备：DMG、MORI SEIKI 车铣中心、" +
            "数控车床、日本大隈加工中心等。" +
            "作为国内精密铸造、和纺织机械生产的龙头企业，" +
            "在轨道交通用铜合金零部件稳步进入欧洲市场之际，" +
            "事业一部充分利用自身优势，进行铸造机器人的研发生产。" +
            "此项目引进了国外技术进行二次开发，从减轻劳动强度、技能要求、降低劳动成本等方面已达到预期效果，" +
            "填补了行业空白，并已申请发明专利；现该机器人已在我公司事业三部应用，" +
            "大幅提升了相关产品质量、降低了生产成本、提高了成品率，在国内上千家精铸企业中已引起不小反响。" +
            " 现阶段外部因素影响较大，材料价格不稳定、人工工资上涨、产品跌价，制造型企业看似在夹缝中生存，" +
            "事业二部采用了精益化生产、并进行设备改造、引进新的生产工艺、产品从制造中控制成本、提升新产品开发，" +
            "取代老产品、提高了产品质量、性价比，成功取代进口零部件，为国内外多家企业提供了满意产品。" +
            "事业三部通过优化原有铸造方式，引进韩国铸造技术，与清华大学等高校建立技术研发合作关系等方式、" +
            " 获得了多项实用专利和发明专利、多次享受国家政策优惠和补贴，在同行业中拥有较高知名度。" +
            "我公司用先进的生产技术、工艺，精良的生产检测设备，并通过OA、ERP、MES系统规范管理来保证产品的一流品质。" +
            "坚持精益求精、开拓创新，将一如既往地提供更优异的产品和更完美的服务，用高端的技术及产品，跨步走向海外市场。",
          jingying:
            "精密铸造、机械加工生产及自动化设备研发制造、销售于一体的生产制造型企业",
          cltime: 2011,
          area: "30亩",
          typecompany: "src22",
        },
        {
          lat: "120.341431536574",
          lng: "29.91163045893325",
          type: 4,
          name: "制冷园区",
        },
      ],
      list2: [
        {
          lat: "120.32137",
          lng: "29.921048",
          type: 2,
          name: "烟感",
        },
        {
          lat: "120.305304",
          lng: "29.891949",
          type: 3,
          name: "视频",
          urlV: "http://115.239.226.21:7086/live/cameraid/1000003%240/substream/1.m3u8",
        },
        {
          lat: "120.331748",
          lng: "29.927734",
          type: 3,
          name: "视频",
          urlV: "http://115.239.226.21:7086/live/cameraid/1000003%240/substream/1.m3u8",
        },
      ],
      marW: 62,
      marH: 46,
      devicesList: [],
    };
  },
  created() {
    this._listCusDevices(-1); //摄像头
    this._listCusDevices(2); //烟感
    if (this.$route.name == "safe") {
      this.marArr = this.list2;
    } else {
      this.marArr = this.list1;
    }
  },
  mounted() {
    this.intMap();
  },
  methods: {
    //设备数据
    _listCusDevices(type) {
      listCusDevices({
        cusId: this.$route.query.cusId || -110,
        type: type,
      }).then((res) => {
        if (res.code == 200) {
          this.devicesList = this.devicesList.concat(res.body.devices) || [];
          // console.log("this.marArr", this.devicesList);
        }
      });
    },
    intMap() {
      this.map = new BMap.Map("location");
      let point = new BMap.Point(120.31786, 29.911067);
      this.map.centerAndZoom(point, 14);
      this.map.enableScrollWheelZoom(true);
      // this.map.setMapType(BMAP_HYBRID_MAP); //设置个性地图需隐藏
      //类型切换 20200408
      // this.map.addControl(
      //   new BMap.MapTypeControl({
      //     mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
      //     anchor: BMAP_ANCHOR_TOP_LEFT,
      //   })
      // );
      //地图风格
      this.map.setMapStyle({
        styleJson: this.mapJson,
      });
      //标点
      let marArr = this.marArr;
      for (var i = 0; i < marArr.length; i++) {
        if (marArr[i].lat && marArr[i].lng) {
          //图标地址
          //1在线 绿  2离线 黄  3警告 红  0未激活 灰
          let status = marArr[i].status;
          //摄像头-1,  烟感 2, 电感 -2,  消防闷盖 5,   井盖6,  消防水压7, 单灯 1001,回路控制柜 1002, 智慧灯杆 1004, 气象感知 1005, 广告屏 1006, 道闸 1201,wifi  1301
          let type = marArr[i].type;
          let myIcons = "";
          if (type == 5 || marArr[i].name == "浙江宁巍机械科技有限公司") {
            this.marW = 62;
            this.marH = 55;
            myIcons = require("@/assets/kj/icon/icon" + 5 + ".png");
          } else if (type == 4) {
            this.marW = 60;
            this.marH = 57;
            myIcons = require("@/assets/kj/icon/icon" + type + ".png");
          } else {
            myIcons = require("@/assets/kj/icon/icon" + type + ".png");
          }

          this.myIcon = new BMap.Icon(
            myIcons,
            new BMap.Size(this.marW, this.marH)
          ); //自定义坐标点图片
          let marker = new BMap.Marker(
            new BMap.Point(marArr[i].lat, marArr[i].lng),
            {
              icon: this.myIcon,
            }
          );
          let opts = {
            position: new BMap.Point(marArr[i].lat, marArr[i].lng), // 指定文本标注所在的地理位置
            offset: new BMap.Size(-100, -70), // 设置文本偏移量
          };
          let label = new BMap.Label(marArr[i].name, opts);
          label.setStyle({
            color: "#fff",
            border: "none",
            padding: "6px",
            backgroundColor: "#01ABD6",
            width: "200px",
            height: "35px",
            lineHeight: "26px",
            textAlign: "center",
          });

          this.map.addOverlay(marker); //标点
          if (this.$route.name == "safe") {
          } else {
            this.map.addOverlay(label); //文本
          }
          //地图点击事件-公司详情
          // 创建图文信息窗口
          let sContent =
            "<div class='comyInfoBox'>" +
            " <div class='comyInfoBox-head'>" +
            "<span class='active' id='qiye1'> 企业数据 </span>" +
            "<span id='qiye2'> 企业介绍 </span>" +
            " </div>" +
            " <div class='comyInfoBox-cont' id='qiyebox1'>" +
            " <div class='comyInfoBox-cont-t'>" +
            "<div>" +
            "<span>企业名称:</span>" +
            marArr[i].name +
            "</div>" +
            "<div>" +
            "<span class='btn-szgc'>" +
            "<img class='srcClass' id=" +
            marArr[i].typecompany +
            " style='cursor: pointer;'" +
            " src=" +
            szgc +
            ">" +
            "</span>" +
            "</div>" +
            "  </div>" +
            "<div class='comyInfoBox-cont-t'>" +
            "<span>公司类型:</span>" +
            "私营企业" +
            " </div>" +
            "<div class='comyInfoBox-cont-t'>" +
            " <div>" +
            "<span>成立时间</span>:" +
            marArr[i].cltime +
            " </div>" +
            "<div>" +
            "<span>经营状态</span>:存续" +
            " </div>" +
            " </div>" +
            " <div class='comyInfoBox-cont-t'>" +
            " <div>" +
            " <span>注册资金</span>:500000元" +
            " </div>" +
            "<div>" +
            " <span>占地面积</span>:" +
            marArr[i].area +
            " </div>" +
            " </div>" +
            "<div class='comyInfoBox-cont-t'>" +
            "<span>信用代码/组织机构代码:</span>" +
            " 5000006562" +
            "</div>" +
            "<div class='comyInfoBox-cont-t'>" +
            " <span>注册地址:</span>" +
            marArr[i].location +
            "</div>" +
            "<div class='comyInfoBox-cont-t'>" +
            " <span>经营范围:</span>" +
            marArr[i].jingying +
            "</div>" +
            " </div>" +
            " <div class='comyInfoBox-cont' style='display: none' id='qiyebox2'>" +
            "<div class='comyInfoBox-cont-t-product'>" +
            marArr[i].production +
            " </div>" +
            "</div>" +
            "</div>";
          let sContentStyle = {
            width: 450, // 信息窗口宽度
            // height: 100, // 信息窗口高度
            // title: "Hello",
          };
          //视频窗口
          let sContentVideo =
            "<div class='tkVideo'>" +
            "<video-player class='video-player vjs-custom-skin' ref='video1Hls' :playsinline='true' :options='video1Hls'>" +
            "</video-player>" +
            "</div>";
          // 公司marker添加点击事件
          if (marArr[i].type == 1) {
            marker.addEventListener("click", function () {
              let infoWindow = new BMap.InfoWindow(sContent, sContentStyle);
              this.openInfoWindow(infoWindow);
              // 图片加载完毕重绘infoWindow
              // document.getElementById("imgDemo").onload = function () {
              //   infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
              // };
              // 切换企业;-setTimeout 防止第一次加载不了

              setTimeout(() => {
                //数字工厂隐藏
                if (document.getElementById("src11")) {
                  document.getElementById("src11").style.display = "none";
                }
                document
                  .getElementById("qiye1")
                  .addEventListener("click", function () {
                    document.getElementById("qiyebox1").style.display = "block";
                    document.getElementById("qiyebox2").style.display = "none";
                    document.getElementById("qiye1").className = "active";
                    document.getElementById("qiye2").className = "";
                  });
                document
                  .getElementById("qiye2")
                  .addEventListener("click", function () {
                    document.getElementById("qiyebox1").style.display = "none";
                    document.getElementById("qiyebox2").style.display = "block";
                    document.getElementById("qiye2").className = "active";
                    document.getElementById("qiye1").className = "";
                  });
                //数字工厂跳转
                let bt = document.querySelector(".srcClass");
                let imgid = bt.getAttribute("id");
                bt.addEventListener("click", function (e) {
                  if (imgid == "src11") {
                    //三峰
                    window.open(
                      "https://www.xwqyy.com/jxpc_data_plant/#/index?type=2"
                    );
                  } else {
                    //ningwei
                    window.open(
                      "https://www.xwqyy.com/jxpc_data_plant/#/index?type=1"
                    );
                  }
                });
              }, 100);
            });
          }
          //数字工厂跳转
          if (marArr[i].type == 4) {
            marker.addEventListener("click", function () {
              window.open(
                "http://www.xwqyy.com/xwy_dn/#/index?id=393&userId=23466"
              );
            });
          }
          //视频播放
          let _this = this;
          if (marArr[i].type == 3) {
            marker.addEventListener("click", function (e) {
              marArr.map((item) => {
                if (item.type == 3 && e.target.point.lng == item.lat) {
                  _this.$root.eventHub.$emit("videoHandle", item.urlV);
                }
              });
            });
          }
        }
      }
      if (this.$route.name == "index") {
        // 绘制面-
        // this.map.addEventListener("click", (e) => {
        //   console.log(e);
        // });
        let mapArrys = [
          [
            {
              lat: "120.32411220634735",
              lng: "29.913195714576613",
            },
            {
              lat: "120.32123762871637",
              lng: "29.89102937949448",
            },
            {
              lat: "120.34825865844758",
              lng: "29.900422502597365",
            },
            {
              lat: "120.36061934226079",
              lng: "29.913195714576613",
            },

            {
              lat: "120.35875086680066",
              lng: "29.92859650455546",
            },
          ],
        ];
        for (let i = 0; i < mapArrys.length; i++) {
          let mapAreas = [];
          for (let j = 0; j < mapArrys[i].length; j++) {
            mapAreas.push(
              new BMap.Point(mapArrys[i][j].lat, mapArrys[i][j].lng)
            );
          }
          let polygon = new BMap.Polygon(mapAreas, {
            strokeColor: "blue", //边线颜色。
            strokeOpacity: 0.0, //边线透明度，取值范围0 - 1。
            fillOpacity: 0.3, //填充的透明度，取值范围0 - 1。
            fillColor: "#B3CEFBFF", //填充颜色。当参数为空时，将没有填充效果。
            strokeStyle: "dashed",
            strokeWeight: 3,
          });
          this.map.addOverlay(polygon);
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.baidu-map-con {
  width: 100%;
  height: 100%;
}
</style>