本文目录
一、注册高德开放平台（一）创建应用（二）添加 Key二、代码实现1. 引入必要的 CSS 文件与 JS 文件2. 放置地图容器3. 核心 JavaScript 代码三、效果图四、完整代码五、其它在高德地图中获取鼠标点击的经纬度，需要使用高德的JS API来实现。
一、注册高德开放平台
点击前往高德开放平台官网 >>>
（一）创建应用
进入【控制台】-【应用管理】-【创建新应用】
（二）添加 Key
在创建好的应用中点击【添加】。
填写 Key 名称、选择 Web 端（JS API）、阅读并同意相关政策和协议。
提交后，即可看到该应用的 Key 。
二、代码实现
新建一个HTML页面。
1. 引入必要的 CSS 文件与 JS 文件
<link rel="stylesheet" href="/jsapi_demos/static/demo-center/css/demo-center.css" /><script type="text/javascript" src="/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="/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="/jsapi_demos/static/demo-center/css/demo-center.css" /><script type="text/javascript" src="/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="/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>
五、其它
1. 高德开放平台官网 >>>
2. 高德地图 JS API 文档 >>>
3. 获取鼠标点击经纬度官方指引 >>>
