效果图
我觉得不用废话那么多，直接上代码吧!
<!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
版权声明：本文为bem_zj原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。