@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>
|
@}
|
