<template>
    <div class="container10">
        <div class="BaiDuMap">
            <baidu-map :center="center" :map-types="mapType" :zoom="zoom" :scroll-wheel-zoom="true"
                style="width: 100%; height: 100%" @ready="handler" @click="getClickInfo" @moving="syncCenterAndZoom"
                @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
                <!-- 必须给容器指高度，不然地图将显示在一个高度为0的容器中，看不到 -->
                <bm-navigation anchor="BMAP_HYBRID_MAP"></bm-navigation>
                <bm-geolocation anchor="BMAP_HYBRID_MAP" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
                <bm-city-list anchor="BMAP_HYBRID_MAP"></bm-city-list>
            </baidu-map>
            <div v-if="show" class="text">{{text}}</div>
        </div> 
    </div>
</template>
  
<script>
import {getDzzfb} from "@/api/zhdjxt.js"
export default {
    data() {
        return {
            // 地址信息
            address: null,
            center: { lng: 0, lat: 0 },
            //地图展示级别
            zoom: 11,
            mapType: ["BMAP_NORMAL_MAP", "BMAP_HYBRID_MAP"],
            show: false,
            text:'',
            list:[]
        };
    },
    created(){
    },
    methods: {
        async getDzzfb() {
           try {
            const res = await getDzzfb()
            // console.log(res);
            this.list = res.data.list
           } catch (error) {
            console.log('获取数据失败');
           }
        },
        test() {
            setTimeout(() => {
                this.show = false;
            }, 3000);
        },
       async handler({ BMap, map }) {
            //这句使得初始为卫星图
            await   this.getDzzfb()
            
            let that = this;
            map.setMapType(BMAP_HYBRID_MAP);
            this.center.lng = 109.839706; //维度
            this.center.lat =40.608379; //经度
            this.zoom = this.zoom;

            this.$nextTick(() => {
        this.list.forEach((item,index) => {
          var point = new BMap.Point(item.long, item.lat);
          var content = "";
          var label = new BMap.Label(content, {
            // 创建文本标注
            position: point,
            offset: new BMap.Size(10, 20),
          });
          let myIcon = new BMap.Icon(
            require("../../assets/hongqi.png"),
            new BMap.Size(35, 35)
          );
          let marker = new BMap.Marker(point, { icon: myIcon });
          marker.addEventListener("mouseover", function (e, i) {
            //鼠标移入事件
            // console.log(i, "i事件");
            that.text=item.text
            that.show = true;
            that.test();
            
          });
          // map.addOverlay(label); // 将标注添加到地图中
          map.addOverlay(marker); // 将标注添加到地图中
          // label.setTitle("我是文本标注label");
          // label.setStyle({
          //   // 设置label的样式
          //   color: "#000",
          //   fontSize: "30px",
          //   border: "2px solid #1E90FF",
          // });
        });
      });
        },

        getClickInfo(e) {
            // 创建地理编码实例
            const myGeo = new BMap.Geocoder();
            // 根据坐标逆解析地址
            myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), (result) => {
                console.log(result, "result-->>>>");
                if (result) {
                    this.address = result.address;
                }
            });
            this.center.lng = e.point.lng;
            this.center.lat = e.point.lat;
        },
        syncCenterAndZoom(e) {
            // console.log(e.target, "e.target-->>>>");
            const { lng, lat } = e.target.getCenter();
            this.zoom = e.target.getZoom();
        },
    },
};
</script>
  
<style lang="scss" scoped>
.container10 {
    width: 46.7708vw;
    height: 51.7204vh;

    // border: 1px solid #00ffff;

    .BaiDuMap {
        width: 46.7708vw;
        height: 51.7204vh;
        position: relative;
    }

    .text {
        // width: 200px;
        // height: 50px;
        padding: 0.5376vh .5208vw;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
    }
}
</style>
<style >
.anchorBL {
  display: none;
}
/* .BMap_stdMpCtrl,
.ui_city_change,
.BMap_noprint{
  display: none;
} */
.BMap_stdMpCtrl {
  display: none;
}
.ui_city_change {
  display: none;
}
.anchorundefined {
  display: none;
}
</style>