<!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"/>
<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 id="container"></div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>请输入关键字:</label>
</td>
</tr>
<tr>
<td>
<input id="tipinput"/>
</td>
</tr>
</table>
</div>
<script src="/JS/jquery.min.js"></script>
<script type="text/javascript">
//1.获取搜索信息标记,点击获取标点信息
var map = new AMap.Map("container", {
resizeEnable: true
});
//输入提示
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: map
}); //构造地点查询类
AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
}
//点击事件
AMap.event.addListener(placeSearch, "markerClick", function (e) {
console.log(e.data.location);//当前marker的经纬度信息
console.log(e.data.address);//获取当前marker的具体地址信息
console.log(e.data);//则是包含所有的marker数据
});
//2.单个定位无信息
//定位蓝色图标
//let marker = new AMap.Marker();
//AMap.plugin(["AMap.Autocomplete"], () => {
// let autocomplete = new AMap.Autocomplete({ input: "tipinput" });
// AMap.event.addListener(autocomplete, "select", (e) => {
// //经度
// this.lnglatX = e.poi.location.lng;
// //纬度
// this.lnglatY = e.poi.location.lat;
// //鼠标滑过点标时的文字提示
// console.log(e);
// marker.setTitle(e.poi.name);
// marker.setPosition(e.poi.location);
// marker.setMap(map);
// map.setCenter(marker.getPosition());
// //自动缩放地图到合适的视野级别
// map.setFitView();
// });
// //点击地图
// map.on('click', (e) => {
// //经度
// this.lnglatX = e.lnglat.lng;
// //纬度
// this.lnglatY = e.lnglat.lat;
// /*
// * 点击地图,没有提示名称,因为有些地点没有名称,获取不到。
// * marker.setTitle('');发现执行之后,还是显示上次的名次,
// * 只能先删除,重新添加。测试没问题。
// */
// console.log(e);
// map.remove(marker);
// marker = new AMap.Marker();
// marker.setPosition(e.lnglat);
// marker.setMap(map);
// map.setCenter(marker.getPosition());
// //自动缩放地图到合适的视野级别
// map.setFitView();
// });
// //编辑
// if(this.editId) {
// marker.setPosition([this.lnglatX, this.lnglatY]);
// marker.setMap(map);
// map.setCenter(marker.getPosition());
// //自动缩放地图到合适的视野级别
// map.setFitView();
// }
// });
</script>
</body>
</html>