这两天整合高德的一些功能

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7     <title>输入提示后查询</title>
  8     <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  9     <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=b611395b7704abe8e26ca14c441004f9&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
 10     <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
 11     
 12         <style>
 13         html,
 14         body,
 15         #container {
 16           width: 100%;
 17           height: 100%;
 18         }
 19     </style>
 20 </head>
 21 <body>
 22  
 23 <div  id="container"></div>
 24  <input id="tipinput"></input>
 25  <input id="Search"  type="button"  onclick="autoInput()" value="点击查询" > </input>
 26     <script type="text/javascript">
 27     
 28      var map = new AMap.Map("container", {
 29         resizeEnable: true,
 30         zoom:17, //初始化地图层级
 31     });
 32     
 33     
 34     var SeraddrelatFirst=null;
 35     var SeraddrelngFirst=null;
 36     var SeraddrenameFirst=null;
 37     var SeraddrelatSecond=null;
 38     var SeraddrelngSecond=null;
 39     var SeraddrenameSecond=null;
 40     //输入提示
 41     var autoOptions = {
 42        city:"长春",
 43        citylimit:true,
 44        input: "tipinput"
 45     };
 46     var auto = new AMap.Autocomplete(autoOptions);
 47     AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
 48     function select(e) {
 49         SeraddrelatFirst =  e.poi.location.lat;
 50         SeraddrelngFirst= e.poi.location.lng;
 51         SeraddrenameFirst =e.poi.address + e.poi.name;  //关键字查询查询
 52     }
 53    </script>
 54 
 55     
 56   <script src="https://webapi.amap.com/maps?v=1.4.10&key=b611395b7704abe8e26ca14c441004f9&plugin=AMap.PlaceSearch"></script>
 57   <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js" ></script>
 58   <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js" ></script>
 59   <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js" ></script>
 60   <script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
 61   
 62   <script  type="text/javascript">
 63 
 64     
 65         // 获取搜索信息
 66     function autoInput(){
 67       var AddressWrite = $("#tipinput").val();
 68       var keywords = AddressWrite;
 69       AMap.plugin('AMap.PlaceSearch', function(){
 70         var autoOptions = {
 71           city: '长春'
 72         }
 73         var placeSearch = new AMap.PlaceSearch(autoOptions);
 74         placeSearch.search(keywords, function(status, result) {
 75                var DataCount = result.poiList.pois.length;
 76                if(DataCount>0)
 77                {
 78                   SeraddrenameSecond =result.poiList.pois[0].address+result.poiList.pois[0].name;    
 79                   SeraddrelatSecond=result.poiList.pois[0].location.lat;    
 80                   SeraddrelngSecond=result.poiList.pois[0].location.lng;                      
 81                }else
 82                {
 83                   if(SeraddrenameFirst!=null)
 84                    {
 85                     SeraddrenameSecond=SeraddrenameFirst;
 86                     SeraddrelatSecond=SeraddrelatFirst;
 87                     SeraddrelngSecond=SeraddrelngFirst;
 88                    }else
 89                    {
 90                    alert("地址有误,请重新填写");
 91                    return false;
 92                    }
 93                }
 94                alert(SeraddrenameSecond);
 95                map && map.destroy();
 96                CraztMap([SeraddrelngSecond,SeraddrelatSecond]);
 97         })
 98       })
 99     }
100   </script>
101   
102 
103 
104 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=b611395b7704abe8e26ca14c441004f9"></script>
105 <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
106 
107 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=b611395b7704abe8e26ca14c441004f9&plugin=AMap.Geocoder"></script>
108 <script type="text/javascript">
109      document.getElementById("container").style.visibility="hidden";//隐藏地图
110     //初始化地图对象，加载地图
111     function CraztMap(Msg)
112     {
113     var map = new AMap.Map("container", {
114         resizeEnable: true,
115         zoom:17, //初始化地图层级
116         center:Msg  //初始化地图中心点
117     });
118     
119     //logMapinfo();
120 
121     map.on("complete", function(){
122        marker = new AMap.Marker({
123             icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
124             position: Msg,
125             offset: new AMap.Pixel(-13, -30)
126            });
127         marker.setMap(map);
128         Sign=marker; 
129         document.getElementById("container").style.visibility="visible";//显示
130     });
131     
132     
133     
134         
135 
136     var logMapinfo = function (){
137         var zoom = map.getZoom(); //获取当前地图级别
138         var center = map.getCenter(); //获取当前地图级别
139        // document.querySelector("#map-center").innerText = center.toString();
140         return center;
141      };
142 
143 
144     function mapMovestart(){
145         //document.querySelector("#text").innerText = '地图移动开始';
146     }
147     
148     
149     
150     function mapMove(){
151         var center = logMapinfo();
152         
153         SignDetil=[center.lng,center.lat];
154 
155        if(Sign!=null)
156         {
157            Sign.setMap(null);
158         }
159           marker = new AMap.Marker({
160             icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
161             position: SignDetil,
162             offset: new AMap.Pixel(-13, -30)
163            });
164         marker.setMap(map);
165         Sign=marker;
166         //document.querySelector("#text").innerText = '地图正在移动';
167     }
168 
169     var Sign=null; 
170     var SignDetil=null; 
171     
172     function mapMoveend(){
173        var center = logMapinfo();
174         
175        SignDetil=[center.lng,center.lat];
176 
177           if(Sign!=null)
178         {
179            Sign.setMap(null);
180         }
181           marker = new AMap.Marker({
182             icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
183             position: SignDetil,
184             offset: new AMap.Pixel(-13, -30)
185            });
186         marker.setMap(map);
187         Sign=marker;
188         var lnglat=SignDetil;
189         //document.querySelector("#text").innerText = '地图移动结束';
190         regeoCode(SignDetil);
191         
192     }
193     
194     
195         var geocoder;
196         function regeoCode(Msg) {
197                 if(!geocoder){
198             geocoder = new AMap.Geocoder({
199                 city: "长春", //城市设为北京，默认：“全国”
200                 radius: 1000 //范围，默认：500
201             });
202         }
203         var lnglat  = Msg;
204          if(!marker){
205             marker = new AMap.Marker();
206             map.add(marker);
207         }
208         marker.setPosition(lnglat);
209         
210         geocoder.getAddress(lnglat, function(status, result) {
211             if (status === 'complete'&&result.regeocode) {
212                 var address = result.regeocode.formattedAddress;
213                 return alert(address);
214             }else{alert(JSON.stringify(result))}
215         });
216     }
217    
218         
219     // 事件绑定
220     function moveOn(){
221        // log.success("绑定事件!");  
222          map.on('movestart', mapMovestart);
223         map.on('mapmove', mapMove);
224         map.on('moveend', mapMoveend);
225     }
226     // 解绑事件
227     function moveOff(){
228        // log.success("解除事件绑定!"); 
229         map.off('movestart', mapMovestart);
230         map.off('mapmove', mapMove);
231         map.off('moveend', mapMoveend);
232     }
233     moveOn();
234     }
235     
236 
237 
238 
239 </script>
240 
241 </body>
242 </html>
功能包括输入提示，根据输入地址名解析经纬度，根据经纬度逆编码查询地址，进行点标记，拖动地图进行位置更换
相关阅读:
DRF(四)
DRF----------(三)
DRF--------(二)
DRF(一)
VUE(四)
VUE(三)
VUE(二)
DRF 序列化组件模型层中参数补充
 django中基于python3.6使用容联发送短信
 django-jwt token校验源码简析
原文地址：https://www.cnblogs.com/cwmizlp/p/9884367.html