(function () {
    // 图片路径
    const locationIMGPath = 'img/location.png';
    const markerBalckPath = 'img/marker_black.svg';
    const markerRedPath = 'img/marker_red.svg';
    const markerBluePath = 'img/marker_blue.svg';
    let map;
    let lastMarker = null;
    let lastClickedMarker = null;
    let isShowWaterIntakeDetail = false;
    let zoom = 12;


    document.addEventListener('DOMContentLoaded', function () {

        initMap();
        // buttonOverLay();
        mountMethodToWindow();

    });
    window.onload = function () {
        //加载坐标点
        window.Android.loadMarker();
    };
    // 初始化地图
    function initMap() {
        var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d8beed89b43160a9a185e5aff431f85d";
        //创建自定义图层对象
        var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
        var config = { layers: [lay] };
        map = new T.Map("mapDiv", config);
        var scale = new T.Control.Scale();
        //添加比例尺控件
        map.addControl(scale);
        map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom); //地图的初始化中心点，此为北京的经纬度
        map.addEventListener("click", closeWaterIntakeDetail);
    }

    // 地图点击后获取经纬度
    function getLngLat(lnglat) {
        console.log(lnglat.lng.toFixed(6) + "," + lnglat.lat.toFixed(6));
        addClickOverLay(lnglat);
    }

    // 点击后添加坐标点
    function addClickOverLay(lnglat) {
        removeMyOverLay();

        let marker = new T.Marker(
            new T.LngLat(lnglat.lng, lnglat.lat) // 创建标注
        );
        map.addOverLay(marker); // 将标注添加到地图中

        // 设置弹出的窗口样式
        let infoWin = new T.InfoWindow();
        let sContent =
            "<div style='margin:0px;'>" +
            "<div style='margin:10px 10px; '>" +
            "<div >电话 : (010)88187700 <br>地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
            "</div>" +
            "<input width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='跳转详情' onClick=\"showToast()\">" +
            "</div>" +
            "</div>";
        infoWin.setContent(sContent);

        // 添加点击事件
        marker.addEventListener("click", function () {
            marker.openInfoWindow(infoWin);
        });

        lastMarker = marker;
    }

    // 删除上次点击后添加的标注
    function removeMyOverLay() {
        if (lastMarker !== null) {
            map.removeOverLay(lastMarker); // 将标注从地图中移除
        }
    }

    // 模拟添加取水口标注
    function buttonOverLay() {
        map.clearOverLays(); // 清理地图上的所有覆盖物

        let data_info = [
            [116.417854, 39.921988, "235取水口"],
            [116.406605, 39.921585, "237取水口"],
            [116.412222, 39.912345, "236取水口"]
        ];

        for (let i = 0; i < data_info.length; i++) {
            let icon = new T.Icon({
                iconUrl: markerBluePath,
                iconSize: new T.Point(27, 27),
                iconAnchor: new T.Point(10, 25)
            });

            let marker = new T.Marker(
                new T.LngLat(data_info[i][0], data_info[i][1]), // 创建标注
                { icon: icon }
            );

            marker.addEventListener("click", function (data) {
                addMarkerListener(data);
            });

            map.addOverLay(marker); // 将标注添加到地图中

            let label = new T.Label({
                text: data_info[i][2],
                position: marker.getLngLat(),
                offset: new T.Point(-50, 10), // 设置标注文字的位置
                opacity: 1, // 设置文本的显示不透明度（范围0-1）
            });
            label.setBorderLine(0); // 设置文本的边框线宽
            label.setBackgroundColor("transparent"); // 设置文本的背景色（透明色）
            label.setFontColor("#0000FF");
            label.setFontSize(10);
            map.addOverLay(label);
        }
    }

    // 显示标注点击后的窗口
    function openInfo(content, e) {
        let point = e.lnglat;
        let markerInfoWin = new T.InfoWindow(content, {
            offset: new T.Point(0, -30)
        });
        map.openInfoWindow(markerInfoWin, point); // 开启信息窗口
    }

    // 手机获取到定位后显示定位
    function locationOverLay(lng, lag) {
        console.log("function》》》》》locationOverLay");
        map.centerAndZoom(new T.LngLat(lng, lag), map.getZoom());

        let icon = new T.Icon({
            iconUrl: locationIMGPath,
            iconSize: new T.Point(27, 27),
            iconAnchor: new T.Point(10, 25)
        });
        let marker = new T.Marker(new T.LngLat(lng, lag), { icon: icon });
        map.addOverLay(marker);
    }


    //设置地图中心点
    function setCenterAndZoom(lng, lat,thiszoom) {
    zoom=thiszoom;
        console.log("function》》》》》setCenterAndZoom>>>>lng:" + lng + ",lat:" + lat);
        map.centerAndZoom(new T.LngLat(lng, lat), zoom);
    }


    // 将方法挂载到 window 上
    function mountMethodToWindow() {
        window.locationOverLay = locationOverLay;
        window.showToast = showToast;
        window.addMarker = addMarker;
        window.setCenterAndZoom = setCenterAndZoom;
    }

    // 调用原生安卓方法显示取水口详情
    function showWaterIntakeDetail(data) {
        isShowWaterIntakeDetail = true;
        window.Android.showWaterIntakeView(data);
    }

    // 调用原生安卓方法隐藏取水口详情
    function closeWaterIntakeDetail(data) {
        if (lastClickedMarker !== null) {
            // 如果有点击取水口则将取水口恢复成黑色
            // 上次点击的标注改为黑色
            var defaulticon = new T.Icon({
                iconUrl: markerBluePath,
                iconSize: new T.Point(27, 27),
                iconAnchor: new T.Point(10, 25)
            });
            lastClickedMarker.setIcon(defaulticon);
        }
        if (isShowWaterIntakeDetail) {
            // 假如显示了取水口详情则隐藏取水口详情
            isShowWaterIntakeDetail = false;
            window.Android.closeWaterIntakeView();
        } else {
            // 假如没有显示取水口则添加点击的坐标
            getLngLat(data.lnglat);
        }
    }

    // 点击标注的事件
    function addMarkerListener(data) {
        chageMarkerIcon(data);
        showWaterIntakeDetail("模拟数据");
    }

    // 修改点击标注的图标
    function chageMarkerIcon(data) {
        // 点击的标注改为红色
        var currentMarker = data.target;
        // 点击后图标
        var clickedIcon = new T.Icon({
            iconUrl: markerRedPath,
            iconSize: new T.Point(27, 27),
            iconAnchor: new T.Point(10, 25)
        });
        // 设置当前点击的 marker 为点击后图标
        currentMarker.setIcon(clickedIcon);
        // 判断点击的不是同一个坐标
        if (lastClickedMarker !== null) {
            if (!isEqualsLngLat(data.target.getLngLat(), lastClickedMarker.getLngLat())) {
                var defaulticon = new T.Icon({
                    iconUrl: markerBluePath,
                    iconSize: new T.Point(27, 27),
                    iconAnchor: new T.Point(10, 25)
                });
                lastClickedMarker.setIcon(defaulticon);
            }
        }
        lastClickedMarker = data.target;
    }
    //调安卓原生
    function showToast() {
        // 调用 JavaScript 接口对象的方法
        window.Android.showToast('Hello, Android!');
    }
    // 判断两个坐标是否一致
    function isEqualsLngLat(data1, data2) {
        return data1.lat === data2.lat && data1.lng === data2.lng;
    }
    //添加从原生传过来的坐标并显示在地图上
    function addMarker(jsonData) {
        console.log("function》》》》》addMarker");
        var array = JSON.parse(jsonData);
        var icon = new T.Icon({
            iconUrl: markerBluePath,
            iconSize: new T.Point(27, 27),
            iconAnchor: new T.Point(10, 25)
        });
        array.forEach(element => {
            let marker = new T.Marker(
                new T.LngLat(element[0], element[1]) // 创建标注
                , { icon: icon });
            //添加点击事件
            marker.addEventListener("click", (data) => {
                addMarkerListener(data)
            });
            map.addOverLay(marker); // 将标注添加到地图中
            let label = new T.Label({
                text: element[2],
                position: marker.getLngLat(),
                offset: new T.Point(-35, 8), // 设置标注文字的位置
                opacity: 1, // 设置文本的显示不透明度（范围0-1）
            });
            label.setBorderLine(0); // 设置文本的边框线宽
            label.setBackgroundColor("transparent"); // 设置文本的背景色（透明色）
            label.setFontColor("#0000FF");
            label.setFontSize(10);
            map.addOverLay(label);
        });
        return "addMarker加载成功"
    }


})();