這兩天整合高德的一些功能
阿新 • • 發佈：2018-10-31
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>
功能包括輸入提示，根據輸入地址名解析經緯度，根據經緯度逆編碼查詢地址，進行點標記，拖動地圖進行位置更換