高德地图-实现地图搜索点选位置功能
<!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">
<title>输入提示后查询</title>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0px;
}
.info-title{
font-weight: bolder;
color: #fff;
font-size: 14px;
line-height: 26px;
padding: 0 0 0 6px;
background: #25A5F7
}
.info-content{
padding: 4px;
color: #666666;
line-height: 23px;
font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
}
.info-content img{
float: left;
margin: 3px;
}
.amap-info-combo .keyword-input {
height: auto;
}
.textbox {
position: relative;
border: 1px solid #D4D4D4;
background-color: #fff;
vertical-align: middle;
display: inline-block;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 3px;
border-radius: 5px 5px 5px 5px;
height: 28px; line-height: 28px;
}
.map_content {
height:100%;
margin-top: 45px;
margin-bottom: 0px
}
.pt-btn {box-shadow: none; color:#aaa; display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; border-radius: 4px; padding: 5px 10px; font-size: 12px; line-height: 1.5; margin:4px 2px 4px 0;}
.pt-btn-purple {background-color: #605ca8; border-color: #464293; color:#fff;}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div style=" margin:5px 5px 5px 5px">
<label>地址:</label><input id="address" class="textbox" type="text" style="width: 300px;">
<button id="saveBtn" onclick="btnClick()" class="pt-btn pt-btn-purple">确认选择</button>
</div>
<div>
<div id="container" class="map_content" ></div>
<div id="myPageTop" style="margin-top: 45px; margin-right: 20px">
<table>
<tr>
<td>
<label>请输入关键字:</label>
</td>
</tr>
<tr>
<td>
<input id="tipinput" class="textbox" style="width: 300px;"/>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
//地图加载
var map = new AMap.Map("container", {
resizeEnable: true,
zoom: 13
});
//输入提示
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
pageSize: 5,
pageIndex: 1,
citylimit: true,
autoFitView: true
});
//添加监听
AMap.event.addListener(auto, "select", select);
var allAddress;
function select(e) {
allAddress = e.poi.district;
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name, function(status, result) {
//清除所有点标记
map.clearMap();
var pois = result.poiList.pois;
//生成点标记(覆盖物)
for(var i = 0; i < pois.length; i++){
var poi = pois[i];
var marker = new AMap.Marker({
map:map,
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b' + (i + 1) + '.png',
position: poi.location,
title: poi.name,
clickable:true,
animation:"AMAP_ANIMATION_DROP",
extData:{
id: i + 1,
name: poi.name,
address: allAddress + poi.address,
type: poi.type,
location: poi.location
}
});
//设置点标记点击事件
marker.on("click", showInfoMap);
map.add(marker);
}
map.setFitView();
});
}
//显示信息窗体
function showInfoMap(e){
var lng = e.lnglat.lng;
var lat = e.lnglat.lat;
var extData = e.target.Ce.extData;
var infoWindow = new AMap.InfoWindow({autoMove:true});
infoWindow.setContent(createContent(extData.name, extData.address, extData.type));
infoWindow.open(map, extData.location);
var object = document.getElementById("address");
object.value=extData.address;
}
function createContent(name, address, type) {
var s = [];
s.push('<div class="info-title">' + name + '</div><div class="info-content">' + "地址:" + address);
s.push("类型:" + type);
s.push('<div>');
return s.join("<br>");
}
function btnClick() {
var object = document.getElementById("address");
alert(object.value);
}
</script>
</body>
</html>
注意:代码需要修改开发的key为你自己申请的,具体流程直接去高德地图官网