| | |
| | | @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"> |
| | | |
| | | <div class="row"> |
| | | <div class="col-sm-6 b-r"> |
| | | <#input id="id" name="主键" underline="true"/> |
| | | <#input id="code" name="编号" underline="true"/> |
| | | <#input id="userId" name="用户id" underline="true"/> |
| | | <#input id="driverId" name="司机id" underline="true"/> |
| | | <#input id="source" name="订单来源(1=小程序)" underline="true"/> |
| | | <#input id="agentId" name="代理商id" underline="true"/> |
| | | <#input id="branchOfficeId" name="分公司id" underline="true"/> |
| | | <#input id="startTime" name="开始服务时间" underline="true"/> |
| | | <#input id="startAddress" name="起点地址" underline="true"/> |
| | | <#input id="startLat" name="起点纬度" underline="true"/> |
| | | <#input id="startLng" name="起点经度" underline="true"/> |
| | | <#input id="endAddress" name="终点地址" underline="true"/> |
| | | <#input id="endLat" name="终点纬度"/> |
| | | </div> |
| | | |
| | | <div class="col-sm-6"> |
| | | <#input id="endLng" name="终点经度" underline="true"/> |
| | | <#input id="boardingTime" name="上车时间" underline="true"/> |
| | | <#input id="getoffTime" name="下车时间" underline="true"/> |
| | | <#input id="estimatedPrice" name="预估价" underline="true"/> |
| | | <#input id="orderMoney" name="订单金额" underline="true"/> |
| | | <#input id="payMoney" name="支付金额" underline="true"/> |
| | | <#input id="discountedPrice" name="优惠金额" underline="true"/> |
| | | <#input id="couponId" name="优惠券id" underline="true"/> |
| | | <#input id="payType" name="支付类型(1=线上)" underline="true"/> |
| | | <#input id="payTime" name="支付时间" underline="true"/> |
| | | <#input id="state" name="订单状态(1=待接单,2=已接单,3=)" underline="true"/> |
| | | <#input id="status" name="状态(1=正常,2=冻结,3=删除)" underline="true"/> |
| | | <#input id="createTime" name="添加时间" underline="true"/> |
| | | <div class="col-sm-12"> |
| | | <div class="form-group"> |
| | | <label class="col-sm-2 control-label">*乘客姓名:</label> |
| | | <div class="col-sm-6"> |
| | | <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入"> |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | <label class="col-sm-2 control-label">*乘客手机号:</label> |
| | | <div class="col-sm-6"> |
| | | <input type="text" class="form-control" id="userPhone" name="userPhone" placeholder="请输入"> |
| | | </div> |
| | | </div> |
| | | <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" 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"> |
| | | <label class="col-sm-2 control-label"></label> |
| | | <div class="col-sm-6"> |
| | | <div id="container1" style="width: 100%;height: 300px;"></div> |
| | | </div> |
| | | </div> |
| | | <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" 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"> |
| | | <label class="col-sm-2 control-label"></label> |
| | | <div class="col-sm-6"> |
| | | <div id="container2" style="width: 100%;height: 300px;"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | |
| | | </div> |
| | | </div> |
| | | <script type="text/javascript"> |
| | | window._AMapSecurityConfig = { |
| | | securityJsCode:'34399ecced17d9c01ef705ef964fc077', |
| | | } |
| | | </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&plugin=AMap.PlaceSearch,AMap.AutoComplete,AMap.Marker,AMap.Geocoder,AMap.Geolocation"></script> |
| | | <script type="text/javascript"> |
| | | //地图加载 |
| | | var map1 = new AMap.Map("container1", { |
| | | zoom: 13, |
| | | resizeEnable: true |
| | | }); |
| | | |
| | | function autoInput1(){ |
| | | var keywords = document.getElementById("tipinput1").value; |
| | | // 实例化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) { |
| | | |
| | | var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()]; |
| | | geocoder1.getAddress(lnglatXY, function (status, result) { |
| | | if (status === 'complete' && result.info === 'OK') { |
| | | // console.log(result,'result') |
| | | |
| | | var address = result.regeocode.formattedAddress; |
| | | // console.log(address,'address'); |
| | | TOrderInfoDlg.startAddress = { |
| | | name: address, |
| | | address: result.regeocode.addressComponent.province+result.regeocode.addressComponent.city+result.regeocode.addressComponent.district, |
| | | lat: e.lnglat.getLat(), |
| | | lon: e.lnglat.getLng(), |
| | | }; |
| | | document.getElementById('tipinput1').value = address; |
| | | } else { |
| | | log.error('根据坐标查询地址失败'); |
| | | } |
| | | }); |
| | | // 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, |
| | | }); |
| | | }); |
| | | |
| | | |
| | | var map2 = new AMap.Map("container2", { |
| | | zoom: 13, |
| | | resizeEnable: true |
| | | }); |
| | | |
| | | 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) { |
| | | 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) { |
| | | |
| | | var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()]; |
| | | geocoder2.getAddress(lnglatXY, function (status, result) { |
| | | if (status === 'complete' && result.info === 'OK') { |
| | | |
| | | var address = result.regeocode.formattedAddress; |
| | | TOrderInfoDlg.endAddress = { |
| | | name: address, |
| | | address: result.regeocode.addressComponent.province+result.regeocode.addressComponent.city+result.regeocode.addressComponent.district, |
| | | lat: e.lnglat.getLat(), |
| | | lon: e.lnglat.getLng(), |
| | | }; |
| | | document.getElementById('tipinput2').value = address; |
| | | } else { |
| | | log.error('根据坐标查询地址失败'); |
| | | } |
| | | }); |
| | | |
| | | 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> |
| | | @} |