New file |
| | |
| | | @layout("/common/_container.html"){ |
| | | <style> |
| | | .newWidth, .single-line { |
| | | max-width: 150px !important; |
| | | display: initial !important; |
| | | } |
| | | |
| | | .newWidth1, .single-line { |
| | | max-width: 200px !important; |
| | | display: initial !important; |
| | | } |
| | | </style> |
| | | <div class="ibox float-e-margins"> |
| | | <div class="ibox-content"> |
| | | <div class="form-horizontal" id="privateCarOrderInfoForm"> |
| | | <div class="row"> |
| | | <div class="col-sm-12"> |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label" for="serverCarModelId">车型:</label> |
| | | <div class="col-sm-3"> |
| | | <select class="form-control newWidth" id="serverCarModelId"> |
| | | <option value="">选择车型</option> |
| | | @for(obj in carmodelList){ |
| | | <option value="${obj.id!}">${obj.name!}</option> |
| | | @} |
| | | </select> |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label" for="startAddress">上车点:</label> |
| | | <div class="col-sm-3"> |
| | | <input class="form-control newWidth" id="startAddress" autocomplete="on" |
| | | onclick="TOrderCrossCityInfoDlg.startAddress()"> |
| | | <input type="hidden" id="startLon"> |
| | | <input type="hidden" id="startLat"> |
| | | </div> |
| | | </div> |
| | | <div class="form-group" id="startAddressModel" hidden> |
| | | <label class="control-label col-sm-2"></label> |
| | | <div class="col-sm-6" style="height: 350px;width: 1000px;" id="startAddressBody"> |
| | | |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label" for="endAddress">下车点:</label> |
| | | <div class="col-sm-3"> |
| | | <input class="form-control newWidth" id="endAddress" autocomplete="on" |
| | | onclick="TOrderCrossCityInfoDlg.endAddress()"> |
| | | <input type="hidden" id="endLon"> |
| | | <input type="hidden" id="endLat"> |
| | | </div> |
| | | </div> |
| | | <div class="form-group" id="endAddressModel" hidden> |
| | | <label class="control-label col-sm-2"></label> |
| | | <div class="col-sm-6" style="height: 350px;width: 1000px;" id="endAddressBody"> |
| | | |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label" for="passengers">乘车人姓名:</label> |
| | | <div class="col-sm-6"> |
| | | <input class="form-control newWidth" type="text" name="passengers" id="passengers"/> |
| | | <input type="button" class="form-control newWidth" |
| | | name="historyBtn" id="historyBtn" onclick="TOrderCrossCityInfoDlg.toHistoryPage()" value="历史记录中选"/> |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label" for="passengersPhone">乘车人电话:</label> |
| | | <div class="col-sm-3"> |
| | | <input type="text" class="form-control newWidth" name="passengersPhone" id="passengersPhone"/> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label">是否包车:</label> |
| | | <div class="col-sm-3"> |
| | | <div class="radio radio-success radio-inline"> |
| | | <input type="radio" id="isBaoChe1" value="1" name="isBaoChe" onclick="TOrderCrossCityInfoDlg.getEstimatedCost()" onchange="TOrderCrossCityInfoDlg.showPeopleNum(1)" /> |
| | | <label for="isBaoChe1"> 是 </label> |
| | | </div> |
| | | <div class="radio radio-info radio-inline"> |
| | | <input type="radio" id="isBaoChe2" value="0" name="isBaoChe" onchange="TOrderCrossCityInfoDlg.showPeopleNum(2)"/> |
| | | <label for="isBaoChe2"> 否 </label> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="form-group" id="peopleNumDiv" hidden> |
| | | <label class="col-sm-3 control-label" for="peopleNumber">乘车人数:</label> |
| | | <div class="col-sm-3"> |
| | | <select class="form-control newWidth" id="peopleNumber" onchange="TOrderCrossCityInfoDlg.getEstimatedCost()" required > |
| | | <option value="" disabled selected>--请选择--</option> |
| | | <option value="1">1</option> |
| | | <option value="2">2</option> |
| | | <option value="3">3</option> |
| | | <option value="4">4</option> |
| | | <option value="5">5</option> |
| | | <option value="6">6</option> |
| | | </select> |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label" for="travelTime">乘车时间:</label> |
| | | <div class="col-sm-3"> |
| | | <input type="text" class="form-control newWidth" onclick="" name="travelTime" id="travelTime"/> |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label" for="remark">备注:</label> |
| | | <div class="col-sm-3"> |
| | | <textarea type="text/plain" class="form-control newWidth" rows="3" id="remark" name="remark"></textarea> |
| | | </div> |
| | | </div> |
| | | <div class="form-group"> |
| | | <label class="col-sm-3 control-label" for="orderMoney">预估价格:</label> |
| | | <div class="col-sm-3"> |
| | | <input type="text" class="form-control newWidth" name="orderMoney" id="orderMoney"/>元 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="row btn-group-m-t"> |
| | | <div class="col-sm-3 col-sm-offset-3"> |
| | | <#button btnCss="info" name="保存" id="ensure" icon="fa-check" |
| | | clickFun="TOrderCrossCityInfoDlg.addSubmit()"/> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <script src="${ctxPath}/static/modular/system/tOrderCrossCity/tOrderCrossCity_info.js"></script> |
| | | <script type="text/javascript"> |
| | | window._AMapSecurityConfig = { |
| | | securityJsCode: 'cfcc20e0bda828c3a98bbce8cd457978', |
| | | } |
| | | </script> |
| | | <script type="text/javascript" |
| | | src="https://webapi.amap.com/maps?v=1.4.15&key=b4803e6022b551c2bf38c1f85cc2f50f&plugin=AMap.Autocomplete,AMap.PlaceSearch,"></script> |
| | | <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> |
| | | <script type="text/javascript"> |
| | | laydate.render({ |
| | | elem: '#travelTime' |
| | | , type: 'datetime' |
| | | , trigger: 'click' //采用click弹出 |
| | | , min: new Date().toString() |
| | | }); |
| | | </script> |
| | | <script type="text/javascript"> |
| | | //起点地图加载 |
| | | var marker, map = new AMap.Map("startAddressBody", { |
| | | resizeEnable: true, |
| | | zoom: 15, |
| | | zooms: [3, 20] |
| | | }); //定位标注当前位置 |
| | | map.plugin('AMap.Geolocation', function () { |
| | | geolocation = new AMap.Geolocation({ |
| | | enableHighAccuracy: true, //是否使用高精度定位,默认:true |
| | | timeout: 10000, //超过10秒后停止定位,默认:无穷大 |
| | | maximumAge: 0, //定位结果缓存0毫秒,默认:0 |
| | | convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true |
| | | showButton: true, //显示定位按钮,默认:true |
| | | showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true |
| | | showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true |
| | | panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true |
| | | buttonPosition: 'LB', //定位按钮的停靠位置 LB左下角、 RB右下角 |
| | | buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) |
| | | zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false |
| | | }); |
| | | |
| | | function onComplete(data) { |
| | | var str = []; |
| | | city = data.addressComponent.citycode; |
| | | str.push('定位结果:' + data.position); |
| | | str.push('定位类别:' + data.location_type); |
| | | if (data.accuracy) { |
| | | str.push('精度:' + data.accuracy + ' 米'); |
| | | } |
| | | //如为IP精确定位结果则没有精度信息 |
| | | str.push('是否经过偏移:' + (data.isConverted ? '是' : '否')); |
| | | var lnglatXY = [data.position.getLng(), data.position.getLat()]; |
| | | //地图上所标点的坐标 |
| | | AMap.service('AMap.Geocoder', function () { |
| | | //回调函数 |
| | | geocoder = new AMap.Geocoder({}); |
| | | geocoder.getAddress(lnglatXY, function (status, result) { |
| | | if (status === 'complete' && result.info === 'OK') { |
| | | //获得了有效的地址信息: //即,result.regeocode.formattedAddress |
| | | // console.log(result.regeocode.formattedAddress); |
| | | var address = result.regeocode.formattedAddress; |
| | | str.push('详细地址:' + address); |
| | | // todo 不弹出信息框 |
| | | // alert(str.join(' | ')); |
| | | } else { |
| | | // alert(str.join(' | ')); //获取地址失败 |
| | | } |
| | | }); |
| | | }) |
| | | } //解析定位错误信息 |
| | | function onError(data) { |
| | | alert('定位失败,原因:' + data.message); |
| | | } |
| | | |
| | | map.addControl(geolocation); |
| | | geolocation.getCurrentPosition() |
| | | AMap.event.addListener(geolocation, 'complete', onComplete); |
| | | //返回定位信息 |
| | | AMap.event.addListener(geolocation, 'error', onError); |
| | | //返回定位出错信息 |
| | | }); //解析定位结果 |
| | | |
| | | var city; |
| | | map.on('click', function (e) { |
| | | if (marker != null) { |
| | | marker.setMap(null); |
| | | } |
| | | //添加标记点 |
| | | $("#startLon").val(e.lnglat.getLng()); |
| | | $("#startLat").val(e.lnglat.getLat()); |
| | | marker = new AMap.Marker({ |
| | | map: map, |
| | | position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] |
| | | }); |
| | | regeoCode(e.lnglat.getLng(), e.lnglat.getLat()); |
| | | }); |
| | | |
| | | |
| | | var infoWindow = new AMap.InfoWindow({ |
| | | autoMove: true, |
| | | offset: { |
| | | x: 0, |
| | | y: -30 |
| | | } |
| | | }); //回调函数 |
| | | |
| | | |
| | | //根据经纬度获取详细地址 |
| | | function regeoCode(lon, lat) { |
| | | |
| | | var lnglat = []; |
| | | lnglat.push(lon); |
| | | lnglat.push(lat); |
| | | map.add(marker); |
| | | marker.setPosition(lnglat); |
| | | |
| | | AMap.service('AMap.Geocoder', function () { |
| | | geocoder = new AMap.Geocoder({}); |
| | | geocoder.getAddress(lnglat, function (status, result) { |
| | | if (status === 'complete' && result.regeocode) { |
| | | var address = result.regeocode.formattedAddress; |
| | | $("#startAddress").val(address); |
| | | } else { |
| | | Feng.error('根据经纬度查询地址失败') |
| | | } |
| | | var data = { |
| | | "name": result.regeocode.addressComponent.neighborhood, |
| | | "location": { |
| | | "lat": lat, |
| | | "lng": lon |
| | | }, |
| | | "address": address, |
| | | "tel": "", |
| | | "type": result.regeocode.addressComponent.neighborhoodType |
| | | }; |
| | | infoWindow.setContent(createContent(data)); |
| | | infoWindow.open(map, marker.getPosition()); |
| | | }); |
| | | }) |
| | | } |
| | | |
| | | |
| | | //输入搜索点信息 |
| | | var autoOptions = { |
| | | city: city, //在规定城市搜索、默认全国 |
| | | input: "startAddress" |
| | | }; |
| | | |
| | | var auto = new AMap.Autocomplete(autoOptions); |
| | | var placeSearch = new AMap.PlaceSearch({ |
| | | pageSize: 5, // 单页显示结果条数 |
| | | pageIndex: 1, // 页码 |
| | | children: 0, //不展示子节点数据 |
| | | city: city, // 兴趣点城市 |
| | | citylimit: true, //是否强制限制在设置的城市内搜索 |
| | | panel: "panel", // 结果列表将在此容器中进行展示。 |
| | | autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 |
| | | extensions: 'base', //返回基本地址信息 */ |
| | | map: map // 展现结果的地图实例 |
| | | }); //构造地点查询类 |
| | | |
| | | AMap.event.addListener(auto, "select", select); //注册监听,当选中某条记录时会触发 |
| | | function select(e) { |
| | | placeSearch.setCity(e.poi.adcode); |
| | | placeSearch.search(e.poi.name); //关键字查询查询 //设置搜索位置定点标注 |
| | | if (e.poi && e.poi.location) { |
| | | map.setZoom(15); |
| | | map.setCenter(e.poi.location); |
| | | var id = e.poi.id; //详情查询 |
| | | placeSearch.getDetails(id, function (status, result) { |
| | | if (status === 'complete' && result.info === 'OK') { |
| | | placeSearch_CallBack(result); |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | |
| | | function placeSearch_CallBack(data) { |
| | | /*if (marker != null) { |
| | | marker.setMap(null); |
| | | }*/ |
| | | if (marker) { |
| | | map.remove(marker); |
| | | marker = null; |
| | | } |
| | | var poiArr = data.poiList.pois; //添加marker |
| | | marker = new AMap.Marker({ |
| | | map: map, |
| | | position: poiArr[0].location |
| | | }); |
| | | map.add(marker); |
| | | marker.setPosition(marker.getPosition()); |
| | | |
| | | infoWindow.setContent(createContent(poiArr[0])); |
| | | infoWindow.open(map, marker.getPosition()); |
| | | } |
| | | |
| | | function createContent(poi) { |
| | | console.log(poi); |
| | | //信息窗体内容 |
| | | $("#startAddress").val(poi.address); |
| | | $("#startLon").val(poi.location.lng); |
| | | $("#startLat").val(poi.location.lat); |
| | | $("#startAreaCode").val(poi.adcode); |
| | | $("#startAreaName").val(poi.adname); |
| | | $("#startCityCode").val(poi.citycode); |
| | | $("#startCityName").val(poi.cityname); |
| | | $("#startProvinceCode").val(poi.pcode); |
| | | $("#startProvinceName").val(poi.pname); |
| | | |
| | | |
| | | var s = []; |
| | | s.push("<b>名称:" + poi.name + "</b>"); |
| | | s.push("地址:" + poi.address); |
| | | s.push("电话:" + poi.tel); |
| | | s.push("类型:" + poi.type); |
| | | return s.join("<br>"); |
| | | } |
| | | </script> |
| | | |
| | | <script> |
| | | //终点地图加载 |
| | | var marker1, mapp = new AMap.Map("endAddressBody", { |
| | | resizeEnable: true, |
| | | zoom: 15, |
| | | zooms: [3, 20] |
| | | }); //定位标注当前位置 |
| | | mapp.plugin('AMap.Geolocation', function () { |
| | | geolocation = new AMap.Geolocation({ |
| | | enableHighAccuracy: true, //是否使用高精度定位,默认:true |
| | | timeout: 10000, //超过10秒后停止定位,默认:无穷大 |
| | | maximumAge: 0, //定位结果缓存0毫秒,默认:0 |
| | | convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true |
| | | showButton: true, //显示定位按钮,默认:true |
| | | showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true |
| | | showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true |
| | | panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true |
| | | buttonPosition: 'LB', //定位按钮的停靠位置 LB左下角、 RB右下角 |
| | | buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) |
| | | zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false |
| | | }); |
| | | mapp.addControl(geolocation); |
| | | geolocation.getCurrentPosition(); |
| | | AMap.event.addListener(geolocation, 'complete', onComplete); |
| | | //返回定位信息 |
| | | AMap.event.addListener(geolocation, 'error', onError); |
| | | //返回定位出错信息 |
| | | }); //解析定位结果 |
| | | |
| | | var cityy; |
| | | mapp.on('click', function (e) { |
| | | if (marker1 != null) { |
| | | marker1.setMap(null); |
| | | } |
| | | //添加标记点 |
| | | $("#endLon").val(e.lnglat.getLng()); |
| | | $("#endlat").val(e.lnglat.getLat()); |
| | | marker1 = new AMap.Marker({ |
| | | map: mapp, |
| | | position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] |
| | | }); |
| | | regeoCode1(e.lnglat.getLng(), e.lnglat.getLat()); |
| | | }); |
| | | |
| | | |
| | | var infoWindow = new AMap.InfoWindow({ |
| | | autoMove: true, |
| | | offset: { |
| | | x: 0, |
| | | y: -30 |
| | | } |
| | | }); //回调函数 |
| | | |
| | | |
| | | //根据经纬度获取详细地址 |
| | | function regeoCode1(lon, lat) { |
| | | |
| | | var lnglat = []; |
| | | lnglat.push(lon); |
| | | lnglat.push(lat); |
| | | mapp.add(marker1); |
| | | marker1.setPosition(lnglat); |
| | | |
| | | AMap.service('AMap.Geocoder', function () { |
| | | geocoder = new AMap.Geocoder({}); |
| | | geocoder.getAddress(lnglat, function (status, result) { |
| | | if (status === 'complete' && result.regeocode) { |
| | | var address = result.regeocode.formattedAddress; |
| | | $("#endAddress").val(address); |
| | | } else { |
| | | Feng.error('根据经纬度查询地址失败') |
| | | } |
| | | var data = { |
| | | "name": result.regeocode.addressComponent.neighborhood, |
| | | "location": { |
| | | "lat": lat, |
| | | "lng": lon |
| | | }, |
| | | "address": address, |
| | | "tel": "", |
| | | "type": result.regeocode.addressComponent.neighborhoodType |
| | | }; |
| | | |
| | | infoWindow.setContent(createContentt(data)); |
| | | infoWindow.open(mapp, marker1.getPosition()); |
| | | }); |
| | | }) |
| | | } |
| | | |
| | | function onComplete(data) { |
| | | var str = []; |
| | | cityy = data.addressComponent.citycode; |
| | | str.push('定位结果:' + data.position); |
| | | str.push('定位类别:' + data.location_type); |
| | | if (data.accuracy) { |
| | | str.push('精度:' + data.accuracy + ' 米'); |
| | | } |
| | | //如为IP精确定位结果则没有精度信息 |
| | | str.push('是否经过偏移:' + (data.isConverted ? '是' : '否')); |
| | | var lnglatXY = [data.position.getLng(), data.position.getLat()]; |
| | | //地图上所标点的坐标 |
| | | AMap.service('AMap.Geocoder', function () { |
| | | //回调函数 |
| | | geocoder = new AMap.Geocoder({}); |
| | | geocoder.getAddress(lnglatXY, function (status, result) { |
| | | if (status === 'complete' && result.info === 'OK') { |
| | | //获得了有效的地址信息: //即,result.regeocode.formattedAddress |
| | | // console.log(result.regeocode.formattedAddress); |
| | | var address = result.regeocode.formattedAddress; |
| | | str.push('详细地址:' + address); |
| | | // todo 不弹出信息框 |
| | | // alert(str.join(' | ')); |
| | | } else { |
| | | // alert(str.join(' | ')); //获取地址失败 |
| | | } |
| | | }); |
| | | }) |
| | | } //解析定位错误信息 |
| | | function onError(data) { |
| | | alert('定位失败,原因:' + data.message); |
| | | } |
| | | |
| | | //输入搜索点信息 |
| | | var autoOptionss = { |
| | | city: cityy, //在规定城市搜索、默认全国 |
| | | input: "endAddress" |
| | | }; |
| | | var autoo = new AMap.Autocomplete(autoOptionss); |
| | | var placeSearchh = new AMap.PlaceSearch({ |
| | | pageSize: 5, // 单页显示结果条数 |
| | | pageIndex: 1, // 页码 |
| | | children: 0, //不展示子节点数据 |
| | | city: city, // 兴趣点城市 |
| | | citylimit: true, //是否强制限制在设置的城市内搜索 |
| | | panel: "panel", // 结果列表将在此容器中进行展示。 |
| | | autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 |
| | | extensions: 'base', //返回基本地址信息 */ |
| | | map: mapp // 展现结果的地图实例 |
| | | }); //构造地点查询类 |
| | | AMap.event.addListener(autoo, "select", selectt); //注册监听,当选中某条记录时会触发 |
| | | |
| | | function selectt(e) { |
| | | placeSearchh.setCity(e.poi.adcode); |
| | | placeSearchh.search(e.poi.name); //关键字查询查询 //设置搜索位置定点标注 |
| | | if (e.poi && e.poi.location) { |
| | | mapp.setZoom(15); |
| | | mapp.setCenter(e.poi.location); |
| | | var id = e.poi.id; //详情查询 |
| | | placeSearchh.getDetails(id, function (status, result) { |
| | | if (status === 'complete' && result.info === 'OK') { |
| | | placeSearch_CallBackk(result); |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | |
| | | function placeSearch_CallBackk(data) { |
| | | /* if (marker1 != null) { |
| | | marker1.setMap(null); |
| | | }*/ |
| | | if (marker1) { |
| | | map.remove(marker); |
| | | marker = null; |
| | | } |
| | | var poiArr = data.poiList.pois; //添加marker |
| | | marker1 = new AMap.Marker({ |
| | | map: mapp, |
| | | position: poiArr[0].location |
| | | }); |
| | | |
| | | mapp.add(marker1); |
| | | marker1.setPosition(marker1.getPosition()); |
| | | |
| | | infoWindow.setContent(createContentt(poiArr[0])); |
| | | infoWindow.open(mapp, marker1.getPosition()); |
| | | } |
| | | |
| | | function createContentt(poi) { |
| | | console.log(poi); |
| | | //信息窗体内容 |
| | | $("#endAddress").val(poi.address); |
| | | $("#endLon").val(poi.location.lng); |
| | | $("#endLat").val(poi.location.lat); |
| | | $("#endAreaCode").val(poi.adcode); |
| | | $("#endAreaName").val(poi.adname); |
| | | $("#endCityCode").val(poi.citycode); |
| | | $("#endCityName").val(poi.cityname); |
| | | $("#endProvinceCode").val(poi.pcode); |
| | | $("#endProvinceName").val(poi.pname); |
| | | var ss = []; |
| | | ss.push("<b>名称:" + poi.name + "</b>"); |
| | | ss.push("地址:" + poi.address); |
| | | ss.push("电话:" + poi.tel); |
| | | ss.push("类型:" + poi.type); |
| | | return ss.join("<br>"); |
| | | } |
| | | </script> |
| | | @} |