<!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi.amap.com/ui/1.0/ui/misc/PoiPicker/examples/search.html --> <base href="//webapi.amap.com/ui/1.1/ui/misc/PoiPicker/examples/"/> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>POI搜索</title> <style> html, body { width: 100%; height: 100%; margin: 0px; padding: 0; font-size: 13px; } #outer-box { height: 100%; padding-right: 300px; } #container { height: 100%; width: 100%; } #panel { position: absolute; top: 0; bottom: 0; right: 0; height: 100%; overflow: auto; width: 300px; z-index: 999; border-left: 1px solid #eaeaea; background: #fff; } #searchBar { height: 30px; background: #ccc; } #searchInput { width: 100%; height: 30px; line-height: 30%; -webkit-box-sizing: border-box; box-sizing: border-box; border: none; border-bottom: 1px solid #ccc; padding: 0 5px; } #searchResults { overflow: auto; height: calc(100% - 30px); } .amap_lib_placeSearch, .amap-ui-poi-picker-sugg-container { border: none !important; } .amap_lib_placeSearch .poibox.highlight { background-color: #CAE1FF; } .poi-more { display: none !important; } </style> </head> <body> <div id="outer-box"> <div id="container" class="map" tabindex="0"></div> <div id="panel" class="scrollbar1"> <div id="searchBar"> <input id="searchInput" placeholder="输入关键字搜索地址"/> </div> <div id="searchResults"></div> </div> </div> <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=1231dec049cbc42442d269f29078337f'></script> <!-- UI组件库 1.0 --> <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script> <script type="text/javascript"> function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } let lng = getQueryString("lng"); let lat = getQueryString("lat"); //let addr = unescape(getQueryString("addr")); let addr = getCookie("addr"); document.getElementById("searchInput").value=addr; console.log(addr); var map = new AMap.Map('container', { zoom: 10, center: [lng, lat] }); map.on('click', (e) => { console.log(e); lng = e.lnglat.getLat(); lat = e.lnglat.getLng(); AMap.plugin('AMap.Geocoder', function () { var geocoder = new AMap.Geocoder({ city: "010"//城市,默认:“全国” }); geocoder.getAddress(e.lnglat, function (status, result) { if (status == 'complete') { console.log(e.lnglat); // $("#searchInput").val(result.regeocode.formattedAddress); parent.document.getElementById(getQueryString("id")).value = result.regeocode.formattedAddress; parent.document.getElementById("lat").value = e.lnglat.lat; parent.document.getElementById("lng").value = e.lnglat.lng; // parent.document.getElementById("street_name").value=poi.address; // parent.document.getElementById("street_number").value=poi.address; var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭 } else { $("#searchInput").val(""); } }) }) }); AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) { console.log("AMapUI"); var poiPicker = new PoiPicker({ input: 'searchInput', placeSearchOptions: { map: map, pageSize: 10 }, searchResultsContainer: 'searchResults' }); poiPicker.on('poiPicked', function (poiResult) { console.log("poiPicked"); poiPicker.hideSearchResults(); var source = poiResult.source, poi = poiResult.item; if (source !== 'search') { //suggest来源的,同样调用搜索 poiPicker.searchByKeyword(poi.name); console.log("aaa"); } else { //console.log("ssssssssssssss") //console.log(poi); // var address=document.getElementById('address').value; console.log(getQueryString("id")); parent.document.getElementById(getQueryString("id")).value = poi.cityname + poi.address + poi.name; parent.document.getElementById("lat").value = poi.location.lat; parent.document.getElementById("lng").value = poi.location.lng; // parent.document.getElementById("street_name").value=poi.address; // parent.document.getElementById("street_number").value=poi.address; var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭 console.log("bbb"); } }); poiPicker.onCityReady(function () { poiPicker.searchByKeyword(''); console.log("ccc"); document.getElementById("searchInput").value=addr; }); }); </script> </body> </html>
高德poi搜索
最新推荐文章于 2023-07-31 10:15:18 发布