@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-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 class="row btn-group-m-t">
|
<div class="col-sm-10">
|
<#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="TOrderInfoDlg.addSubmit()"/>
|
<#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="TOrderInfoDlg.close()"/>
|
</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"></script>
|
<script type="text/javascript">
|
//地图加载
|
var map1 = new AMap.Map("container1", {
|
zoom: 13,
|
center: [104.064, 30.6576],
|
resizeEnable: true
|
});
|
|
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,
|
});
|
});
|
|
|
var map2 = new AMap.Map("container2", {
|
zoom: 13,
|
center: [104.064, 30.6576],
|
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) {
|
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>
|
@}
|
