本文已参与「新人创作礼」活动，一起开启掘金创作之路。
在高德地图中获取鼠标点击的经纬度，需要使用高德的 JS API 来实现。
一、注册高德开放平台
（一）创建应用
进入【控制台】-【应用管理】-【创建新应用】
（二）添加 Key
在创建好的应用中点击【添加】。
填写 Key 名称、选择 Web 端（JS API）、阅读并同意相关政策和协议。
提交后，即可看到该应用的 Key 。
二、代码实现
新建一个 HTML 页面。
1. 引入必要的 CSS 文件与 JS 文件
<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>
2. 放置地图容器
<div id="container" class="map"></div>
可在 Style 中设置地图组件的大小：
.map {
margin: 50px;
height: 300px;
width: 60%;
}
使用 div 显示结果
<div class="result">
<div>鼠标点击纬度：<span id="c-latitude"></span></div>
<div>鼠标点击经度：<span id="c-longitude"></span></div>
</div>
3. 核心 JavaScript 代码
引入第一个 JS 时，需要替换你的 Key 。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=此处为你的Key值&plugin=AMap.Autocomplete"></script>
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true
});
// 为地图注册 click 事件获取鼠标点击出的经纬度坐标
map.on('click', function(e) {
console.log(e)
document.getElementById("c-longitude").innerText = e.lnglat.getLng()
document.getElementById("c-latitude").innerText = e.lnglat.getLat()
});
</script>
三、效果图
四、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<title>高德地图经纬度抓取</title>
<style>
.map {
margin: 50px;
height: 300px;
width: 30%;
}
.result {
margin: 0 50px;
}
.result div {
font-weight: bold;
}
</style>
</head>
<body>
<div id="container" class="map"></div>
<div class="result">
<div>鼠标点击纬度：<span id="c-latitude"></span></div>
<div>鼠标点击经度：<span id="c-longitude"></span></div>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=此处换为你的Key值&plugin=AMap.Autocomplete"></script>
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true
});
// 为地图注册 click 事件获取鼠标点击出的经纬度坐标
map.on('click', function(e) {
console.log(e)
document.getElementById("c-longitude").innerText = e.lnglat.getLng()
document.getElementById("c-latitude").innerText = e.lnglat.getLat()
});
</script>
</body>
