管理后台：订单列表添加的地图优化

lishouyi

2023-06-01 f90f24f12f331f491737492022c17dffb79ec505

管理后台：订单列表添加的地图优化

 management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrder_add.html

@@ -1,4 +1,5 @@
@layout("/common/_container.html"){
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal">
@@ -20,7 +21,12 @@
                    <div class="form-group">
                        <label class="col-sm-2 control-label">*起始地点：</label>
                        <div class="col-sm-6">
                            <input type="text" id="tipinput1" class="form-control" id="startAddress" name="startAddress" placeholder="请输入">
                            <input type="text" id="tipinput1" class="form-control" id="startAddress" name="startAddress" autocomplete="off" placeholder="请输入">
                            <div id="map_of_cs_one"
                                 style="visibility: visible; display: none; left: 1088.5px; top: 485px; min-width: 166px;"></div>
                            <div class="amap-sug-result-one" style="position: absolute;display: none; min-width: 96%;right: 0px;overflow: hidden;max-width: 96%;margin-right: 16px;z-index: 1024;
background-color: #fefefe;border: 1px solid #d1d1d1"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
@@ -32,7 +38,11 @@
                    <div class="form-group">
                        <label class="col-sm-2 control-label">目的地：</label>
                        <div class="col-sm-6">
                            <input type="text" id="tipinput2" class="form-control" id="endAddress" name="endAddress">
                            <input type="text" id="tipinput2" class="form-control" id="endAddress" autocomplete="off" name="endAddress">
                            <div id="map_of_cs_two"
                                 style="visibility: visible; display: none; left: 1088.5px; top: 485px; min-width: 166px;"></div>
                            <div class="amap-sug-result-two" style="position: absolute;display: none; min-width: 96%;right: 0px;overflow: hidden;max-width: 96%;margin-right: 16px;z-index: 1024;
background-color: #fefefe;border: 1px solid #d1d1d1"></div>
                        </div>
                    </div>
                    <div class="form-group">
@@ -60,7 +70,7 @@
    }
</script>
<script src="${ctxPath}/static/modular/system/tOrder/tOrder_info.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=86fcccf007b64ae97b01c3c982c0ef0f"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=86fcccf007b64ae97b01c3c982c0ef0f&plugin=AMap.PlaceSearch,AMap.AutoComplete,AMap.Marker,AMap.Geocoder"></script>
<script type="text/javascript">
    //地图加载
    var map1 = new AMap.Map("container1", {
@@ -68,29 +78,74 @@
        center: [104.064, 30.6576],
        resizeEnable: true
    });
    //输入提示
    var autoOptions1 = {
        input: "tipinput1"
    };

    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
        var auto = new AMap.AutoComplete(autoOptions1);
        var placeSearch = new AMap.PlaceSearch({
            map: map1
        });  //构造地点查询类
        auto.on("select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
            TOrderInfoDlg.position = e.poi;
            console.log(e.poi);
            TOrderInfoDlg.startAddress = {
                name:e.poi.name,
                address: e.poi.district + e.poi.address,
                lat: e.poi.location.lat,
                lon: e.poi.location.lng,
            };
    function autoInput1(){
        var keywords = document.getElementById("tipinput1").value;
        AMap.plugin('AMap.AutoComplete', function(){
            // 实例化Autocomplete
            var autoOptions = {
                city: '全国'
            }
            var autoComplete = new AMap.Autocomplete(autoOptions);
            autoComplete.search(keywords, function(status, result) {
                $(".amap-sug-result-one").html("");
                $(".amap-sug-result-one").show();
                console.log(result.info);
                for(const key in result.tips){
                    $(".amap-sug-result-one").append('<div class="auto-item amapaddr" id="amap-sug4" onclick="javascript:geoCode1(\''+result.tips[key].name+'\', \''+result.tips[key].district+ result.tips[key].address+'\');">' + result.tips[key].name+ " <span style='color: darkgray;margin-left: 13px;'>" + result.tips[key].district+ result.tips[key].address+ " </span></div>");
                }
            })
        })
    }

    autoInput1();

    document.getElementById("tipinput1").oninput = autoInput1;

    var geocoder1 = new AMap.Geocoder({

    });

    var marker1 = new AMap.Marker();

    function geoCode1(t, d) {

        var address  = t; //document.getElementById('address').value;
        geocoder1.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                console.log(result);
                var lnglat = result.geocodes[0].location;
                TOrderInfoDlg.startAddress = {
                    name: t,
                    address: result.geocodes[0].formattedAddress,
                    lat: lnglat.lat,
                    lon: lnglat.lng,
                };

                document.getElementById('tipinput1').value = t;
                marker1.setPosition(lnglat);
                map1.add(marker1);
                map1.setFitView(marker1);
            }else{
                log.error('根据地址查询位置失败');
            }
        });
        $(".amap-sug-result-one").hide();
    }


    map1.on('click', function(e) {
        console.log(e,'e')
        ln = e.lnglat.getLng();
        lt = e.lnglat.getLat();
        if (marker1){
            map1.remove(marker1);
        }
        marker1 = new AMap.Marker({
            position: new AMap.LngLat(ln, lt),
            anchor: 'bottom-center',
            map: map1,
        });
    });


@@ -99,29 +154,76 @@
        center: [104.064, 30.6576],
        resizeEnable: true
    });
    //输入提示
    var autoOptions2 = {
        input: "tipinput2"
    };

    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
        var auto = new AMap.AutoComplete(autoOptions2);
        var placeSearch = new AMap.PlaceSearch({
            map: map2
        });  //构造地点查询类
        auto.on("select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
            TOrderInfoDlg.position = e.poi;
            console.log(e.poi);
            TOrderInfoDlg.endAddress = {
                name:e.poi.name,
                address: e.poi.district + e.poi.address,
                lat: e.poi.location.lat,
                lon: e.poi.location.lng,
            };
        }
    function autoInput2(){
        var keywords = document.getElementById("tipinput2").value;
        AMap.plugin('AMap.AutoComplete', function(){
            // 实例化Autocomplete
            var autoOptions = {
                city: '全国'
            }
            var autoComplete = new AMap.Autocomplete(autoOptions);
            autoComplete.search(keywords, function(status, result) {
                $(".amap-sug-result-two").html("");
                $(".amap-sug-result-two").show();
                console.log(result.info);
                for(const key in result.tips){
                    $(".amap-sug-result-two").append('<div class="auto-item amapaddr" id="amap-sug4" onclick="javascript:geoCode2(\''+result.tips[key].name+'\', \''+result.tips[key].district+ result.tips[key].address+'\');">' + result.tips[key].name+ " <span style='color: darkgray;margin-left: 13px;'>" + result.tips[key].district+ result.tips[key].address+ " </span></div>");
                }
            })
        })
    }

    autoInput2();

    document.getElementById("tipinput2").oninput = autoInput2;

    var geocoder2 = new AMap.Geocoder({

    });

    var marker2 = new AMap.Marker();

    function geoCode2(t, d) {

        var address  = t; //document.getElementById('address').value;
        geocoder2.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                console.log(t);
                console.log(result);
                var lnglat = result.geocodes[0].location;
                TOrderInfoDlg.endAddress = {
                    name: t,
                    address: result.geocodes[0].formattedAddress,
                    lat: lnglat.lat,
                    lon: lnglat.lng,
                };
                document.getElementById('tipinput2').value = t;
                marker2.setPosition(lnglat);
                map2.add(marker2);
                map2.setFitView(marker2);
            }else{
                log.error('根据地址查询位置失败');
            }
        });
        $(".amap-sug-result-two").hide();
    }


    map2.on('click', function(e) {
        console.log(e,'e');
        ln = e.lnglat.getLng();
        lt = e.lnglat.getLat();

        if (marker2){
            map2.remove(marker2);
        }
        marker2 = new AMap.Marker({
            position: new AMap.LngLat(ln, lt),
            anchor: 'bottom-center',
            map: map2,
        });
    });

</script>
@}