js接入高德地图API，搜索位置，实时定位，获取经纬度

谁践踏了优雅 2022-05-14 12:07 609阅读 0赞

##   1.服务端带所需数据进入 ##

>     @RequestMapping(value = "deploy", method = \{RequestMethod.GET , RequestMethod.POST\})
> 
>      public String deploy(Long venderId, ModelMap model) throws Exception \{
> 
>         //venderId为售货机的id
> 
>         model.put("venderId", venderId);
> 
>         //获取到所有的商圈
> 
>         model.put("tradingAreas", tradingAreaService.findAll());
> 
>         //获取到售货机的基本信息
> 
>         Vender vender = venderService.find(venderId);
> 
>         //将售货机返回给前端
> 
>         model.put("vender", vender);
> 
>         return "/admin/vender/setMap";
> 
>      \}

##    2. 界面接收所需数据，加js效果，将坐标赋值给location控件 ##

> \[\#assign shiro=JspTaglibs\["/WEB-INF/tld/shiro.tld"\] /\]  
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
> <html xmlns="http://www.w3.org/1999/xhtml">  
> <head>  
> <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>  
> <meta name="renderer" content="webkit"/>  
> <title>后台管理</title>
> 
> <link href="$\{base\}/resources/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"/>  
> <link href="$\{base\}/resources/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"/>  
> <link href="$\{base\}/resources/admin/css/common.css" rel="stylesheet" type="text/css"/>  
> <link href="$\{base\}/resources/admin/css/animate.css" rel="stylesheet"/>  
> <link href="$\{base\}/resources/admin/css/style.css" rel="stylesheet"/>  
> <link href="$\{base\}/resources/admin/css/iCheck/custom.css" rel="stylesheet"/>  
> <link href="$\{base\}/resources/admin/css/chosen.css" rel="stylesheet">  
> <link href="$\{base\}/resources/admin/css/skins/all.css" rel="stylesheet"/>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/jquery.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/jquery.tools.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/jquery-qrcode.min.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/jquery.lSelect.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/jquery.validate.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/common.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/input.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/plugins/layer/layer.min.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/iCheck/icheck.min.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/iCheck/custom.min.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/datePicker/WdatePicker.js"></script>
> 
> //引入高德js  
> <scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.3&key=xxxxxxxxxxxxxxxxxxxx&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>  
> <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/pinyin.js"></script>  
> <script type="text/javascript" src="$\{base\}/resources/admin/js/chosen.jquery.js"></script>
> 
> <style type="text/css">  
>     .amap-marker .marker-route \{  
>         position: absolute;  
>         width: 40px;  
>         height: 44px;  
>         color: \#e90000;  
>         background: url(/resources/admin/img/localtion\_community.png) no-repeat;  
>         cursor: pointer;  
>         background-size: auto 100%;  
>         background-position: center;  
>     \}  
> </style>  
> </head>  
> <body class="fixed-sidebar full-height-layout gray-bg">  
>     <div class="wrapper animated fadeInRight">  
>         <div class="ibox-content">  
>             <div class="row" style="padding-left:25px"></div>  
>             <form id="inputForm"  method="post">  
>                 <input type="hidden" name="id" value="$\{vender.id\}" />//接收  
>                 <table class="input tabContent">  
>                         <tr>  
>                             <th>  
>                                 商圈  
>                             </th>  
>                             <td>  
>                                 <select name="tradingAreaId"  data-placeholder="选择商圈" style="width:195px;" id="tradingAreaId" class="dept\_select">  
>                                     <option value="-1"></option>  
>                                     \[\#list tradingAreas as tradingArea\]  
>                                         <option value="$\{tradingArea.id\}">$\{tradingArea.name\}</option>  
>                                     \[/\#list\]  
>                                 </select>  
>                             </td>  
>                         </tr>  
>                         <tr>  
>                             <th>  
>                                 部署地址  
>                             </th>  
>                             <td>  
>                                 <input type="text" name="address" class="text" maxlength="200" value="$\{(vender.address)!\}"/>  
>                                 <span style="color:red;padding:10px;line-height:15px;display: inline-block;">请输入搜索地址</span>  
>                             </td>  
>                         </tr>  
>                           
>                     <tr>  
>                         <th>  
>                             地理位置  
>                         </th>  
>                         <td>  
>                             <div id="myPageTop">  
>                                 <table>  
>                                     <tr>  
>                                         <td>  
>                                             <label>请输入关键字：</label>  
>                                         </td>  
>                                         <td>  
>                                             <input type="text" id="tipinput"/>  
>                                         </td>  
>                                     </tr>  
>                                 </table>  
>                             </div>  
>                             <div id="container" style="width:500px; height:300px"></div>  
>                             <input type="hidden" name="location" class="text" value="$\{vender.longitude\},$\{vender.latitude\}" maxlength="200" />  
>                         </td>  
>                     </tr>  
>                 </table>  
>                 <table class="input">  
>                     <tr>  
>                         <td colspan="2" style="text-align:center;">  
>                             <input type="button" id="update" class="button" value="部署" />  
>                         </td>  
>                     </tr>  
>                 </table>  
>             </form>  
>         </div>  
>           
>     </div>  
> </body>  
> </html>

>  <script type="text/javascript">  
>         var longitude = "$\{vender.longitude\}";  
>         var latitude = "$\{vender.latitude\}";  
>         var centerData = $.trim(longitude).length > 0 ? \[longitude, latitude\] : undefined;  
>         var marker;  
>         var map = new AMap.Map("container", \{  
>             resizeEnable: true,  
>             center: centerData,//地图中心点  
>             zoom: 16 //地图显示的缩放级别  
>         \});  
>           
>         //标记位置  
>            var markerPosition = function(lng, lat)\{  
>                 marker = new AMap.Marker(\{ //添加自定义点标记  
>                 map: map,  
>                 position: \[lng, lat\], //基点位置  
>                 zIndex: 999999,  
>                 offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置  
>                 draggable: true,  //是否可拖动  
>                 content: '<div class="marker-route marker-marker-bus-from"></div>'   //自定义点标记覆盖物内容  
>             \});  
>             $('input\[name="location"\]').val(marker.getPosition());  
>             marker.on('dragend', function()\{  
>                 $('input\[name="location"\]').val(marker.getPosition());  
>             \});  
>            \}  
>              
>            //定位成功时进行标记位置  
>         var onComplete = function (data) \{  
>            markerPosition(data.position.getLng(), data.position.getLat())  
>         \}  
>           
>         //当前坐标为空时进行定位到当前位置，否则进行位置回显  
>         if($.trim(longitude).length == 0)\{  
>             map.plugin('AMap.Geolocation', function() \{  
>                 geolocation = new AMap.Geolocation(\{  
>                     enableHighAccuracy: true, //是否使用高精度定位，默认:true  
>                     timeout: 5000, //超过10秒后停止定位，默认：无穷大  
>                     convert: true, //自动偏移坐标，偏移后的坐标为高德坐标  
>                     zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false  
>                     buttonPosition: 'RB',  
>                 \});  
>                 map.addControl(geolocation);  
>                 geolocation.getCurrentPosition();  
>                 AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息  
>                 AMap.event.addListener(geolocation, 'error', function()\{ //返回定位出错时使用城市中心点  
>                     geolocation.getCityInfo(function(status,result)\{  
>                         marker = new AMap.Marker(\{  
>                                 map: map,  
>                                 position: result.center,  
>                                 zIndex: 999999,  
>                                 offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置  
>                                 draggable: true,  //是否可拖动  
>                                 content: '<div class="marker-route marker-marker-bus-from"></div>'    
>                             \});  
>                     \});  
>                 \});  
>             \});  
>         \}else\{  
>             markerPosition(longitude, latitude)  
>         \}  
>         //输入提示  
>         var autoOptions = \{  
>             input: "tipinput"  
>         \};  
>         var auto = new AMap.Autocomplete(autoOptions);  
>           
>         var searchFun = function(adcode, keyword)\{  
>             placeSearch.setCity(adcode);  
>             placeSearch.search(keyword,function(status,result)\{  
>                 var first = result.poiList.pois\[0\];  
>                 console.log(first.location)  
>                 //移动大头针  
>                 marker.setPosition(first.location);  
>                 map.setCenter(first.location);  
>                 //将坐标放到隐藏域  
>                 $('input\[name="location"\]').val(marker.getPosition());  
>             \});  //关键字  
>         \}  
>         var select = function(e) \{  
>             searchFun(e.poi.adcode, e.poi.name)  
>         \}  
>         var placeSearch = new AMap.PlaceSearch(\{map: map\});  //构造地点查询  
>         AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发  
>       
>         var $address = $("input\[name='address'\]");  
>         var $tipinput = $("\#tipinput");  
>           
>         var autoSearch = function()\{  
>             //var loc = window.parent.getLocation();  
>             var searchval = $address.val();  
>             //$tipinput.val(loc+searchval);  
>             $tipinput.val(searchval);  
>             //searchFun(undefined, loc + searchval)  
>             searchFun(undefined,searchval)  
>               
>             //设置pinyin  
>             if($("input\[name='isCityCb'").is(":checked"))\{  
>                 $("\#pinyin").val(chineseToPinYin(searchval))  
>             \}  
>         \}  
>           
>         $(function()\{  
>             $('.dept\_select').chosen();  
>             $('.i-checks').iCheck(\{  
>                 checkboxClass: 'icheckbox\_square-green',  
>                 radioClass: 'iradio\_square-green',  
>             \});  
>             $("\#pinyin").focus(function()\{  
>                 var address = $address.val();  
>                 $(this).val(chineseToPinYin(address))  
>             \})  
>             $(".text").blur(function()\{  
>                 $(this).val($.trim($(this).val()));  
>             \})  
>             $address.keyup(autoSearch);  
>           
>             $('.ibox-content input').on('ifChanged', function(event)\{  
>                 if(this.checked)\{  
>                     $("input\[name='"+this.value+"'\]").val("true");  
>                     $(".isCity").fadeIn("fast");  
>                 \}else\{  
>                     $("input\[name='"+this.value+"'\]").val("false");  
>                     $(".isCity").fadeOut("fast");  
>                 \}  
>               
>             \}).iCheck(\{  
>                 checkboxClass: 'icheckbox\_square-blue',  
>                 radioClass: 'iradio\_square-blue',  
>                 increaseArea: '20%'  
>             \});  
>             $("\#update").click(function()\{  
>                 $.ajax(\{  
>                     type:"POST",  
>                     url:"$\{base\}/admin/vender/editAddress.jhtml",  
>                     data:$("\#inputForm").serialize(),  
>                     dataType:"JSON",  
>                     success:function(data)\{  
>                      var frameindex= parent.layer.getFrameIndex(window.name);  
>                           parent.layer.close(frameindex);  
>                           parent.location.reload();  
>                         //if(data.resultCode == 200)\{  
>                         //    window.parent.completeUpd(data.resultContent);  
>                         //\}          
>                     \}  
>                 \})  
>             \})  
>               
>             $("\#tipinput").bind("keypress",function(event)\{  
>                 if(event.keyCode == "13")\{  
>                     var loc = window.parent.getLocation();  
>                     map.getCity(function(result)\{  
>                         placeSearch.setCity(result.city)  
>                         placeSearch.search(loc + $tipinput.val(),function()\{  
>                             //移动大头针  
>                             marker.setPosition(map.getCenter());  
>                             //将坐标放到隐藏域  
>                             $('input\[name="location"\]').val(marker.getPosition());  
>                         \});  
>                     \})  
>                 \}  
>             \})  
>               
>         \});  
>     </script> 
> 
>

##   3.效果 ##

![70][]

![70 1][]

[70]: /images/20220514/4536051e82d342f0af92bfe7b11b79c5.png
[70 1]: /images/20220514/8bde1f0335ae40aba4ee2a1a33f293de.png