百度地图信息窗口自定义

 

 

<template>
  <div class="mapContainer">
    <!-- <div id="tMap" /> -->
    <div id="tMap" ref="tMap" />
  </div>
</template>

<script>
import { TDIMap, BaiduMap } from "@/utils/map.js";
import marki1 from "@/assets/map/i-1.png";
import marki2 from "@/assets/map/i-2.png";
import marki3 from "@/assets/map/i-3.png";
import marki4 from "@/assets/map/i-4.png";
import marki5 from "@/assets/map/i-5.png";
import marki6 from "@/assets/map/i-6.png";
import marki7 from "@/assets/map/i-7.png";

const $tdMap = null;

export default {
  name: "TdMap",
  props: {},
  data() {
    return {
      // lat: 30.930916,
      // lng: 118.344438,
      //118.17193,30.727538
      lat: 30.927928,
      lng: 118.194855,
      mapLevel: 11,
      marArr: [
        {
          lat: "118.174014",
          lng: "30.732226",
          name: "这里是景区名称",
        },
        {
          lat: "118.194855",
          lng: "30.927928",
          name: "这里是景区名称",
        },
        {
          lat: "118.104855",
          lng: "30.867928",
          name: "这里是景区名称",
        },
        {
          lat: "118.134855",
          lng: "30.787928",
          name: "这里是景区名称",
        },
        {
          lat: "118.144855",
          lng: "30.927928",
          name: "这里是景区名称",
        },
        {
          lat: "118.167855",
          lng: "30.997928",
          name: "这里是景区名称",
        },
        {
          lat: "118.178855",
          lng: "30.957928",
          name: "这里是景区名称",
        },
      ],
    };
  },
  mounted() {
    this.initBaiDu();
  },
  methods: {
    initBaiDu() {
      const _this = this;
      BaiduMap.init().then((BMap) => {
        _this.map = new BMap.Map(_this.$refs.tMap);
        _this.map.centerAndZoom(
          new BMap.Point(_this.lng, _this.lat),
          _this.mapLevel
        );
        _this.map.addControl(
          new BMap.MapTypeControl({
            mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], //图层类型+混合
            // mapTypes: [BMAP_NORMAL_MAP], //图层类型
            // anchor: BMAP_ANCHOR_TOP_LEFT, //切换按钮位置
          })
        );
        _this.map.enableScrollWheelZoom();
        //地图个性化
        _this.map.setMapStyleV2({
          styleId: "2ab34170567eb610404d09569833f505",
        });
        //划区域
        // setTimeout(() => {
        //   _this.getBoundary();
        // }, 2000);
        _this.getBoundary();
      });
    },
    getBoundary() {
      const _this = this;
      let bdary = new BMap.Boundary();
      bdary.get("安徽省芜湖市南陵县", function (rs) {
        //获取行政区域
        _this.map.clearOverlays(); //清除地图覆盖物
        let count = rs.boundaries.length; //行政区域的点有多少个
        if (count === 0) {
          alert("未能获取当前输入行政区域");
          return;
        }
        let pointArray = [];
        for (let i = 0; i < count; i++) {
          let ply = new BMap.Polygon(rs.boundaries[i], {
            strokeWeight: 3,
            strokeColor: "#13EBFF",
            strokeStyle: "dashed",
            fillColor: "#08304B",
            fillOpacity: 0.2,
            isBuildingMask: true,
            isPoiMask: true,
            isMapMask: true,
          }); //建立多边形覆盖物
          _this.map.addOverlay(ply); //添加覆盖物
          pointArray = pointArray.concat(ply.getPath());
        }
        _this.map.setViewport(pointArray); //调整视野
        //地图标点==========================
        const marArr = _this.marArr;
        let mark = "";
        for (var i = 0; i < marArr.length; i++) {
          switch (i) {
            case 0:
              mark = marki1;
              break;
            case 1:
              mark = marki2;
              break;
            case 2:
              mark = marki3;
              break;
            case 3:
              mark = marki4;
              break;
            case 4:
              mark = marki5;
              break;
            case 5:
              mark = marki6;
              break;
            case 6:
              mark = marki7;
              break;
            default:
              mark = marki1;
          }
          if (marArr[i].lat && marArr[i].lng) {
            _this.myIcon = new BMap.Icon(mark, new BMap.Size(42, 50));
            let marker = new BMap.Marker(
              new BMap.Point(marArr[i].lat, marArr[i].lng),
              {
                icon: _this.myIcon,
              }
            );
            _this.map.addOverlay(marker);
            // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            // 创建信息窗口
            let scont = "<div class='tcont'>" + marArr[i].name + "</div>";
            let opts = {
              width: 150,
            };
            let infoWindow = new BMap.InfoWindow(scont, opts);
            // 点标记添加点击事件
            let point = new BMap.Point(marArr[i].lat, marArr[i].lng);
            marker.addEventListener("click", function () {
              _this.map.openInfoWindow(infoWindow, point); // 开启信息窗口
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mapContainer {
  width: 100%;
  z-index: 4;
  height: 100%;
}
#tMap {
  width: 100%;
  height: 100%;
}
</style>

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

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

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

.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;
  opacity: 0;
}

.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;
  opacity: 0;
}

.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;
  opacity: 0;
}

.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;
  opacity: 0;
}
.BMap_bubble_content{
  width: 150px !important;
  color: #fff !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;
}
img[src="http://api.map.baidu.com/images/iws3.png"] {
 opacity: 0;
}
img[src="http://api.map.baidu.com/images/iw_close1d3.gif"] {
  left: 165px !important;
 }

//地图工具隐藏
.anchorBL {
  display: none;
}

.tcont {
  width: 150px;
  height: 50px;
  background: url("../assets/map/m-t-bg.png") no-repeat center center !important;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #13EBFF;
  z-index: 9;
}