JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索
Posted jervisking
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索相关的知识，希望对你有一定的参考价值。
代码如下 (填入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搜索的主要内容，如果未能解决你的问题，请参考以下文章