From f90f24f12f331f491737492022c17dffb79ec505 Mon Sep 17 00:00:00 2001
From: lishouyi <linlangsur163@163.com>
Date: 星期四, 01 六月 2023 20:16:42 +0800
Subject: [PATCH] 管理后台：订单列表添加的地图优化
---
management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrder_add.html | 194 +++++++++++++++++++++++++++++++++++++-----------
1 files changed, 148 insertions(+), 46 deletions(-)
diff --git a/management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrder_add.html b/management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrder_add.html
index 7cb77b0..7dc2b2f 100644
--- a/management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrder_add.html
+++ b/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>
@}
--
Gitblit v1.7.1