代码如下 (填入Key值) :
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>高德地图</title> ???<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> ???<script type="text/javascript" ???????????src="http://webapi.amap.com/maps?v=1.4.8&key=申请的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script> ???<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> ???<script type="text/javascript"> ???????window.onload = function () { ???????????//定义初始经纬度 ???????????var mylgt = "120.185954"; ???????????var mylat = "30.11235"; ???????????//地图加载 ???????????var map = new AMap.Map("container", { ???????????????zoom: 15, ???//地图缩放级别 ???????????????resizeEnable: true, ???????????????center: [mylgt, mylat] ???????????}); ???????????//定义一个标记 ???????????var marker = new AMap.Marker({ ???????????????icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", ???????????????position: [mylgt, mylat] ???????????}); ???????????//添加标记 ???????????marker.setMap(map); ???????????//为地图注册click事件获取鼠标点击出的经纬度坐标 ???????????var clickEventListener = map.on(‘click‘, function (e) { ???????????????document.getElementById("lnglat").value = e.lnglat.getLng() + ‘,‘ + e.lnglat.getLat(); ???????????????//清空标记 ???????????????if (marker) { ???????????????????marker.setMap(null); ???????????????????marker = null; ???????????????} ???????????????//重设标记 ???????????????marker = new AMap.Marker({ ???????????????????icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", ???????????????????position: [e.lnglat.getLng(), e.lnglat.getLat()] ???????????????}); ???????????????marker.setMap(map); ???????????}); ???????????//输入地点提示 ???????????var auto = new AMap.Autocomplete({ ???????????????input: "tipinput" ???????????}); ???????????//构造地点查询类 ???????????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); ?//关键字查询查询 ???????????} ???????} ???</script></head><body><div id="container"></div><div id="myPageTop"> ???<table> ???????<tr> ???????????<td> ???????????????<label>按关键字搜索：</label> ???????????</td> ???????????<td> ???????????????<label>左击获取经纬度：</label> ???????????</td> ???????</tr> ???????<tr> ???????????<td> ???????????????<input type="text" placeholder="请输入关键字进行搜索" id="tipinput"> ???????????</td> ???????????<td> ???????????????<input type="text" readonly="true" id="lnglat"> ???????????</td> ???????</tr> ???</table></div></body></html>步骤说明 :
1. 在高德地图开放平台中申请Key
2. 创建Html文件,添加引用资源 ( plugin=AMap.Autocomplete,AMap.PlaceSearch 中 AMap.Autocomplete -> 输入提示插件 , AMap.PlaceSearchPOI -> 搜索插件 )
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.8&key=e0fa91db4ad26b3c627452db308f570e&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script><script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
3. 编写地图div与相应显示栏
<div id="container"></div><div id="myPageTop"> ???<table> ???????<tr> ???????????<td> ???????????????<label>按关键字搜索：</label> ???????????</td> ???????????<td> ???????????????<label>左击获取经纬度：</label> ???????????</td> ???????</tr> ???????<tr> ???????????<td> ???????????????<input type="text" placeholder="请输入关键字进行搜索" id="tipinput"> ???????????</td> ???????????<td> ???????????????<input type="text" readonly="true" id="lnglat"> ???????????</td> ???????</tr> ???</table></div>
4. 为页面添加对应功能的JS代码
<script type="text/javascript">
???window.onload = function () {
???????//定义初始经纬度
???????var mylgt = "120.185954";
???????var mylat = "30.11235";
???????//地图加载
???????var map = new AMap.Map("container", {
???????????zoom: 15, ???//地图缩放级别
???????????resizeEnable: true,
???????????center: [mylgt, mylat]
???????});
???????//定义一个标记
???????var marker = new AMap.Marker({
???????????icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
???????????position: [mylgt, mylat]
???????});
???????//添加标记
???????marker.setMap(map);
???????//为地图注册click事件获取鼠标点击出的经纬度坐标
???????var clickEventListener = map.on(‘click‘, function (e) {
???????????document.getElementById("lnglat").value = e.lnglat.getLng() + ‘,‘ + e.lnglat.getLat();
???????????//清空标记
???????????if (marker) {
???????????????marker.setMap(null);
???????????????marker = null;
???????????}
???????????//重设标记
???????????marker = new AMap.Marker({
???????????????icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
???????????????position: [e.lnglat.getLng(), e.lnglat.getLat()]
???????????});
???????????marker.setMap(map);
???????});
???????//输入地点提示
???????var auto = new AMap.Autocomplete({
???????????input: "tipinput"
???????});
???????//构造地点查询类
???????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); ?//关键字查询查询
???????}
???}
</script>
JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索
原文地址：https://www.cnblogs.com/Jervisking/p/9409508.html