HTML页面配置高德地图,获取位置
一、使用情况
1、之前项目用的前后端分离框架,所以用Vue接入的高德地图,自动搜索补全,是请求的后台返回的数据。
2、现在用单体项目,前端是Bootstrap,需要接高德地图,自动搜索补全,直接是前端请求数据,没有通过后台。
3、申请key的方式,可以看之前的文档。此处需要注意,如下图:
二、功能介绍
1、打开地图,鼠标点击获取经纬度,并标记
2、输入搜索条件,提示对应相关信息,下拉选择
3、点击对应数据,地图跳转该位置,并标记
三、效果图
四、HTML页面
1、页面代码
注:为了测试,此处安全密钥直接配置在了代码中,其余方式可参考JS API 安全密钥使用
<!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://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container" class="map"></div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>请输入关键字:</label>
</td>
</tr>
<tr>
<td>
<input id="tipinput"/>
</td>
</tr>
</table>
</div>
<div id="autodiv"></div>
<div class="input-card">
<h4>左击获取经纬度:</h4>
<div class="input-item">
<input type="text" readonly="true" id="lnglat">
</div>
</div>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "对应的安全密钥",
};
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=自己申请的Web端(JS API)&plugin=AMap.AutoComplete"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">
var marker, map = new AMap.Map("container", {
zoom: 11,
resizeEnable: true,
center: [116.397428, 39.90923], //地图中心点
});
//输入提示
var autoOptions = {
input: "tipinput"
};
AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
var auto = new AMap.AutoComplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: map
}); //构造地点查询类
auto.on("select", select);//注册监听,当选中某条记录时会触发
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
var latLngArr = [e.poi.location.lng, e.poi.location.lat]
//添加标记
map.clearMap();
marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [e.poi.location.lng, e.poi.location.lat],
offset: new AMap.Pixel(-13, -30)
});
marker.setMap(map);
map.setCenter(latLngArr);
document.getElementById("lnglat").value = e.poi.location.lng + ',' + e.poi.location.lat
}
});
//为地图注册click事件获取鼠标点击出的经纬度坐标
map.on('click', function(e) {
document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
var latLngArr = [e.lnglat.getLng(), e.lnglat.getLat()]
//添加标记
map.clearMap();
marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [e.lnglat.getLng(), e.lnglat.getLat()],
offset: new AMap.Pixel(-13, -30)
});
marker.setMap(map);
map.setCenter(latLngArr);
});
</script>
</body>
</html>
一个在学习的开发者,勿喷,欢迎交流