本文主要是介绍利用高德地图模拟美团搜索相似地址以及地图摄取选择类似地址，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图
我觉得不用废话那么多，直接上代码吧!
<!doctype html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><link rel="stylesheet" type="text/css" href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css"><style>html,body{width: 100%;height: 100%;}.mapOut{position: absolute;width: 100%;height: 100%;box-sizing: border-box;-webkit-box-sizing: border-box;padding-bottom: 230px;}#container {width: 100%;height: 100%;}.info{min-width: 26rem;}#search {position: absolute;left: 0;top: 0;z-index: 1000;}#infoBottom{position: fixed;left: 0;width: 100%;bottom: 0;background-color: white;z-index: 1000000;border-radius: 10px 10px 0 0;padding:10px;box-shadow: 0 0px 2px rgba(0,0,0,0.2);-webkit-box-shadow: 0 0px 2px rgba(0,0,0,0.2);height: 250px;overflow: hidden;overflow-y: scroll;-webkit-overflow-scrolling: touch;}.infoLine{box-sizing: border-box;-webkit-box-sizing: border-box;padding: 5px 0;border-bottom: 1px dashed #dcdcdc;}.infoLine p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .infoLine:nth-last-child(1){border-bottom: 0px;}.mapReturn{width: 1.6rem;height: 1.6rem;border: 0.22rem solid #3c3c3c;position: absolute;left: 1.5rem;top: 1.3rem;border-bottom: 0;border-right: 0;z-index: 10000;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}</style><title>选择地址</title></head><body><div class="mapOut"><div id="container"></div></div><div class="mapReturn"></div><div class="info"><input type="text" id="search" /></div><div id="infoBottom"></div><script src="https://webapi.amap.com/maps?v=1.4.15&key=5433dcc2bc76f4bfae5b9b20179efac5&plugin=AMap.PlaceSearch"></script><script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js"></script><script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js"></script><script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script><script>var startPosition = [113.26762, 23.129623];var startName = '珠江国际大厦';//标记点var marker;// 初始化地图var map = new AMap.Map("container", {resizeEnable: true,center: startPosition,zoom: 18});//添加地址插件var placeSearch;AMap.plugin('AMap.PlaceSearch', function() {placeSearch = new AMap.PlaceSearch({pageSize: 10, // 每页10条pageIndex: 1, // 获取第一页});aMapSearchNearBy(startPosition);marker = new AMap.Marker({position: new AMap.LngLat(startPosition[0], startPosition[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: startName});map.add(marker);})// 移除已创建的 marker//map.remove(marker);document.getElementById('search').oninput = function(e) {var keywords = $(this).val();console.log(keywords);placeSearch.search(keywords, function(status, result) {console.log(result);$('#infoBottom').empty();locationList = result.poiList.pois;for(var i=0; i<locationList.length; i++){$('#infoBottom').append('<div class="infoLine" lng='+locationList[i].location.lng+' lat='+locationList[i].location.lat+'><div class="infoName"><p>名称：'+locationList[i].name+'</p></div><div class="infoAddress"><p>地址：<span>'+locationList[i].address+'</span></p></div></div>')if(i == 0){map.setCenter([locationList[i].location.lng, locationList[i].location.lat]);map.remove(marker);marker = new AMap.Marker({position: new AMap.LngLat(locationList[i].location.lng, locationList[i].location.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: locationList[i].name});map.add(marker);}}$('#infoBottom').scrollTop(0);})};function aMapSearchNearBy(centerPoint) {// 第一个参数是关键字，这里传入的空表示不需要根据关键字过滤// 第二个参数是经纬度，数组类型// 第三个参数是半径，周边的范围// 第四个参数为回调函数placeSearch.searchNearBy('', centerPoint, 1000, function(status, result) {if(result.info === 'OK') {var locationList = result.poiList.pois; // 周边地标建筑列表console.log(locationList);$('#infoBottom').empty();for(var i=0; i<locationList.length; i++){$('#infoBottom').append('<div class="infoLine" lng='+locationList[i].location.lng+' lat='+locationList[i].location.lat+'><div class="infoName"><p>名称：'+locationList[i].name+'</p></div><div class="infoAddress"><p>地址：<span>'+locationList[i].address+'</span></p></div></div>')}$('#infoBottom').scrollTop(0);} else {$('.infoBottom').empty();console.log('获取位置信息失败!');}});}map.on('click', function(e) {var text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置双击了地图！';aMapSearchNearBy([e.lnglat.getLng(), e.lnglat.getLat()]);map.setCenter([e.lnglat.getLng(), e.lnglat.getLat()]);map.remove(marker);marker = new AMap.Marker({position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: ''});map.add(marker);});//选取地址$('#infoBottom').on('click','.infoLine',function(){var lng = $(this).attr('lng');var lat = $(this).attr('lat');var address = $(this).find('.infoAddress span').text();console.log(lng,lat,address);})</script></body></html>想做微信小程序、H5、微官网可以联系我，qq392563086
这篇关于利用高德地图模拟美团搜索相似地址以及地图摄取选择类似地址的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
