在高德地图中获取鼠标点击的经纬度

本文目录

一、注册高德开放平台
- （一）创建应用
- （二）添加 Key
二、代码实现
- 1. 引入必要的 CSS 文件与 JS 文件
- 2. 放置地图容器
- 3. 核心 JavaScript 代码
三、效果图
四、完整代码
五、其它

在高德地图中获取鼠标点击的经纬度，需要使用高德的 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>

五、其它

1. 高德开放平台官网 >>>

2. 高德地图 JS API 文档 >>>

3. 获取鼠标点击经纬度官方指引 >>>

在高德地图中获取鼠标点击的经纬度相关推荐

地图绘制边界。高德。PPMAP。鼠标点击经纬度坐标。地图图标点点击弹窗窗口。地图图标点点击事件。
边界: == 第一种:绘制边界. 通过绘制多边形的API来绘制边界. 高德API:多边形 Polygon. 矢量图形-覆盖物-教程-地图 JS API | 高德地图API 将关键的边界轮廓经纬度坐标 ...
高德地图地位获取地址
高德地图地位获取地址高德地图开发平台地址:https://lbs.amap.com/ 1导入依赖库 implementation 'com.amap.api:location:4.4.0' 2权限 ...
高德地图markevents_高德地图markers生成和点击
因为自己平时上班也是比较忙,遇到什么写什么,希望能给现在的你一些帮助,都是自己在工作中遇到的问题,给自己一个提醒,也是分享,相信很多人在做高德地图开发的时候,对于新手,官方的demo解读单个marke ...
高德地图 amap 设置鼠标样式
我的需求,要在高德地图里面做一个地图选点的功能.这个功能很简单,但是高德地图的默认鼠标样式是一只小手,不适合做选点用. 高德地图中有4中样式如下图对应名称如下: pointer,default,mo ...
cesium获取点击内容信息_Cesium获取鼠标点击位置（PickPosition）
cesium学习了这么长时间,有时候写鼠标点击事件时,想获取鼠标点击点位置,发现情况很多.比如以下情形: 1获取鼠标点的对应椭球面位置 2获取加载地形后对应的经纬度和高程 3获取倾斜摄影或模型点击处的 ...
Android 高德地图中路线规划绘制界面线路
Android 高德地图中路线规划绘制界面线路下面代码是根据很多的经纬度的点,绘制出直线的线路.比较死板 /*** 绘制景区的路线*/private void setRouteInfo(List&l ...
调用腾讯地图API、高德地图API 获取当前地理位置、经纬度
调用腾讯地图API.高德地图API 获取当前地理位置.经纬度 web开发中,很多情况下都会需要获取当前位置的经纬度,在网上找了几个不同的地图,最终找到兼容比较好的腾讯地图API 1.调用腾讯地图API ...
Unity 获取鼠标点击转换世界坐标
/// <summary> /// 获取鼠标点击坐标 /// </summary> Vector3 screenPosition;//将物体从世界坐标转换为屏幕坐标 Vecto ...
android 高德地图定位获取经纬度
android 高德地图定位获取经纬度之前开发定位都是集成百度的,领导说要用高德的,没办法干吧,官方的文档太详细了看着真累. 我们得先去官网注册开发者账号,创建应用,填写自己项目的包名和SHA1, ...