效果展示
话不多说,直接上代码
<!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/main.css"/>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=你自己从高德地图上申请的Key值"></script>
<style type="text/css">
body {
font-size: 12px;
}
#tip {
background-color: #ddf;
color: #333;
border: 1px solid silver;
box-shadow: 3px 4px 3px 0px silver;
position: absolute;
top: 10px;
right: 10px;
border-radius: 5px;
overflow: hidden;
line-height: 20px;
}
#tip input[type="text"] {
height: 25px;
border: 0;
padding-left: 5px;
width: 280px;
border-radius: 3px;
outline: none;
}
/* 经纬度 */
.ll{
background-color: #ddf;
color: #333;
border: 1px solid silver;
box-shadow: 3px 4px 3px 0px silver;
position: absolute;
bottom: 10px;
right: 10px;
border-radius: 5px;
overflow: hidden;
line-height: 20px;
}
.ll input[type="text"] {
height: 25px;
border: 0;
padding-left: 5px;
width: 280px;
border-radius: 3px;
outline: none;
}
#panel {
position: absolute;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 50px;
right: 10px;
width: 280px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="panel"></div>
<div id="tip">
<input type="text" id="keyword" name="keyword" value="请输入关键字:(选定后搜索)" onfocus='this.value=""'/>
</div>
<div class="ll">
<input type="text" id="lnglat" name="lnglat" value="经度,纬度" disabled/>
</div>
<script type="text/javascript">
var windowsArr = [];
var marker = [];
var map = new AMap.Map("mapContainer", {
resizeEnable: true,
center: [116.397428, 39.90923],//地图中心点
zoom: 13,//地图显示的缩放级别
keyboardEnable: false
});
AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
var autoOptions = {
city: "天津", //城市,默认全国
input: "keyword"//使用联想输入的input的id
};
autocomplete= new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
city:'天津',
map:map,
panel: "panel"
})
AMap.event.addListener(autocomplete, "select", function(e){
//TODO 针对选中的poi实现自己的功能
console.log(e)
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name,function(status, result){
if (status === 'complete' && result.info === 'OK') {
//TODO : 解析返回结果,如果设置了map和panel,api将帮助完成点标注和列表
console.log(result)
}
})
});
//小点 点击事件
AMap.event.addListener(placeSearch, "markerClick", function(e){
console.log(e.data.location);//当前marker的经纬度信息
document.getElementById("lnglat").value = e.data.location.lng + ',' + e.data.location.lat;
})
// 右上角列表点击事件
AMap.event.addListener(placeSearch, "listElementClick", function(e){
console.log(e.data.location);//当前marker的经纬度信息
document.getElementById("lnglat").value = e.data.location.lng + ',' + e.data.location.lat;
})
});
</script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>
记得更换key值,如果需要使用vue的话只需要双绑对应的v-model 经纬度值即可。