1.在地图中心显示中心点。 2.优化地图覆盖物显示，使显示的图标正对坐标。 3.优化地图覆盖物文字居中显示。

zuoxiao

2024-12-17 2fb397e4a31d14880ed2524f898ae67a0d664c06

 app/src/main/assets/js/map.js

@@ -4,11 +4,27 @@
    const markerBalckPath = 'img/marker_black.svg';
    const markerRedPath = 'img/marker_red.svg';
    const markerBluePath = 'img/marker_blue.svg';
    const centerPin = 'img/push_pin.svg';
    let map;
    let lastMarker = null;
    let lastClickedMarker = null;
    let isShowWaterIntakeDetail = false;
    let zoom = 12;

    // 将方法挂载到 window 上
    function mountMethodToWindow() {
        window.locationOverLay = locationOverLay;
        window.showToast = showToast;
        window.addMarker = addMarker;
        window.setCenterAndZoom = setCenterAndZoom;
        window.updateLocation = updateLocation;
        window.aginShowLocation = aginShowLocation;
        window.cleanLocationLay = cleanLocationLay;
        window.updateInspectionLocation = updateInspectionLocation;
        window.cleanLoclLay = cleanLoclLay;
        window.showPin = showPin;

    }


    document.addEventListener('DOMContentLoaded', function () {
@@ -87,47 +103,6 @@
        }
    }

    // 模拟添加取水口标注
    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) {
@@ -161,19 +136,7 @@
    }


    // 将方法挂载到 window 上
    function mountMethodToWindow() {
        window.locationOverLay = locationOverLay;
        window.showToast = showToast;
        window.addMarker = addMarker;
        window.setCenterAndZoom = setCenterAndZoom;
        window.updateLocation = updateLocation;
        window.aginShowLocation = aginShowLocation;
        window.cleanLocationLay = cleanLocationLay;
        window.updateInspectionLocation = updateInspectionLocation;
        window.cleanLoclLay = cleanLoclLay;

    }

    // 调用原生安卓方法显示取水口详情
    function showWaterIntakeDetail(data) {
@@ -188,8 +151,8 @@
            // 上次点击的标注改为黑色
            var defaulticon = new T.Icon({
                iconUrl: markerBluePath,
                iconSize: new T.Point(27, 27),
                iconAnchor: new T.Point(10, 25)
                iconSize: new T.Point(28, 28),
                iconAnchor: new T.Point(14, 28)
            });
            lastClickedMarker.setIcon(defaulticon);
        }
@@ -216,8 +179,8 @@
        // 点击后图标
        var clickedIcon = new T.Icon({
            iconUrl: markerRedPath,
            iconSize: new T.Point(27, 27),
            iconAnchor: new T.Point(10, 25)
            iconSize: new T.Point(28, 28),
            iconAnchor: new T.Point(14, 28)
        });
        // 设置当前点击的 marker 为点击后图标
        currentMarker.setIcon(clickedIcon);
@@ -226,8 +189,8 @@
            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)
                    iconSize: new T.Point(28, 28),
                    iconAnchor: new T.Point(14, 28)
                });
                lastClickedMarker.setIcon(defaulticon);
            }
@@ -249,8 +212,8 @@
    
        var icon = new T.Icon({
            iconUrl: markerBluePath,
            iconSize: new T.Point(27, 27),
            iconAnchor: new T.Point(10, 25)
            iconSize: new T.Point(28, 28),
            iconAnchor: new T.Point(14, 28)
        });
        let marker = new T.Marker(
            new T.LngLat(lng, lat) // 创建标注
@@ -261,14 +224,14 @@
        });
        map.addOverLay(marker); // 将标注添加到地图中
        let label = new T.Label({
            text: name,
            text: `<div style='position:absolute;left:-50%;transform: translateX(-50%);'>${name}<div>`,
            position: marker.getLngLat(),
            offset: new T.Point(-35, 8), // 设置标注文字的位置
            offset: new T.Point(0, 8), // 设置标注文字的位置
            opacity: 1, // 设置文本的显示不透明度（范围0-1）
        });
        label.setBorderLine(0); // 设置文本的边框线宽
        label.setBackgroundColor("transparent"); // 设置文本的背景色（透明色）
        label.setFontColor("#0000FF");
        label.setFontColor("#FFFFFF");
        label.setFontSize(10);
        map.addOverLay(label);
        return "addMarker加载成功"
@@ -338,4 +301,35 @@
    }



    //在地图上显示中心点
    var pinMarker;
    function showPin() {
        var icon = new T.Icon({
            iconUrl: centerPin,
            iconSize: new T.Point(28, 28),
            iconAnchor: new T.Point(14, 28)
        });
        pinMarker = new T.Marker(
            new T.LngLat(map.getCenter().getLng(), map.getCenter().getLat()) // 创建标注
            , { icon: icon });
        map.addOverLay(pinMarker); // 将标注添加到地图中
        map.addEventListener("moveend", MapMoveend);
    }

    function MapMoveend(e) {
        map.removeOverLay(pinMarker);
        var icon = new T.Icon({
            iconUrl: centerPin,
            iconSize: new T.Point(28, 28),
            iconAnchor: new T.Point(14, 28)
        });
        var center = e.target.getCenter();
        console.log("lng:" + center.getLng() + "   lat:" + center.getLat())
        pinMarker = new T.Marker(
            new T.LngLat(center.getLng(), center.getLat()) // 创建标注
            , { icon: icon });
        map.addOverLay(pinMarker); // 将标注添加到地图中
    }

})();