一:css代码
* {
margin: 0;
padding: 0;
}
.control {
width: 100%;
max-width: 375px;
height: 100%;
margin: auto;
position: relative;
}
.wells {
margin-top: 30%;
height: 300px;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.input-card {
position: absolute;
bottom: -8rem;
right: 0;
width: 16rem;
}
#queryes {
position: absolute;
bottom: -38px;
left: 0;
}
#query {
width: 160px;
height: 25px;
border: 1px solid #C1C1C1;
border-radius: 20px;
background: rgba(255, 255, 255, 0.5);
outline: none;
padding-left: 10px;
overflow: hidden;
}
二:HTML 代码
<div class="control">
<div class="well wells">
<div id="container" class="map"></div>
<div class="input-card">
<div>点击得到经纬度:</div>
<div class="input-item">
<input type="text" readonly="true" id="lnglat" />
</div>
</div>
</div>
<div id="queryes">
<input id="query" placeholder="请输入查询的地点:" />
</div>
</div>
三:js代码
//点击地图得到经纬度坐标
map.on('click', function(e) {
document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
});
//输入提示
var querys = {
input: "query"
};
var automatic = new AMap.Autocomplete(querys);
var searches = new AMap.PlaceSearch({
map: map
}); //构造地点查询类
AMap.event.addListener(automatic, "select", select); //注册监听,当选中某条记录时会触发
function select(e) {
searches.setCity(e.poi.adcode);
searches.search(e.poi.name); //关键字查询查询
}
//地图上标点 标记当前位置 删除上一个标记点
var markers = []; //创建一个空数组存储每次标记的marker
map.on('click', function(e) {
map.remove(markers);
var marker = new AMap.Marker({
position: [e.lnglat.lng, e.lnglat.lat], //标记当前的坐标
offset: new AMap.Pixel(-10, -18) //鼠标与标点的像素偏差值
});
map.add([marker]);
markers.push(marker);
})