从服务端获取取水口坐标并显示在地图上

zuoxiao

2024-09-24 45e69852f43abe0f79967786ada3c7cf887b5b48

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

@@ -3,7 +3,7 @@
    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;
@@ -89,7 +89,7 @@

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

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

        let icon = new T.Icon({
@@ -142,11 +143,20 @@
        map.addOverLay(marker);
    }


    //设置地图中心点
    function setCenterAndZoom(lng, lat) {
        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;
    }

    // 调用原生安卓方法显示取水口详情
@@ -161,7 +171,7 @@
            // 如果有点击取水口则将取水口恢复成黑色
            // 上次点击的标注改为黑色
            var defaulticon = new T.Icon({
              iconUrl: markerBalckPath,
                iconUrl: markerBluePath,
              iconSize: new T.Point(27, 27),
              iconAnchor: new T.Point(10, 25)
            });
@@ -199,7 +209,7 @@
     if (lastClickedMarker!== null) {
       if (!isEqualsLngLat(data.target.getLngLat(), lastClickedMarker.getLngLat())) {
         var defaulticon = new T.Icon({
           iconUrl: markerBalckPath,
                    iconUrl: markerBluePath,
           iconSize: new T.Point(27, 27),
           iconAnchor: new T.Point(10, 25)
         });
@@ -222,7 +232,7 @@
        console.log("function》》》》》addMarker");
        var array = JSON.parse(jsonData);
        var icon = new T.Icon({
            iconUrl: markerBalckPath,
            iconUrl: markerBluePath,
            iconSize: new T.Point(27, 27),
            iconAnchor: new T.Point(10, 25)
        });
@@ -235,6 +245,17 @@
                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加载成功"
    }