情不知从何起,一往而情深
排名
6
文章
199
粉丝
4
评论
3
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

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

6104人阅读 2022/3/31 11:12 总访问:1110248 评论:0 收藏:0 手机
分类: .net

官网demo:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7. <title>鼠标拾取地图坐标</title>
  8. <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  9. <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  10. </head>
  11. <style type="text/css">
  12. html,body{
  13. width: 100%;
  14. height: 100%;
  15. margin: 0px;
  16. }
  17. .map{
  18. height: 100%;
  19. width: 100%;
  20. float: left;
  21. }
  22. </style>
  23. <body>
  24. <div id="container" class="map"></div>
  25. <div class="input-card">
  26. <h4>左击获取经纬度:</h4>
  27. <div class="input-item">
  28. <input type="text" readonly="true" id="lnglat">
  29. </div>
  30. </div>
  31. <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete"></script>
  32. <script type="text/javascript">
  33. var map = new AMap.Map("container", {
  34. resizeEnable: true
  35. });
  36. //为地图注册click事件获取鼠标点击出的经纬度坐标
  37. map.on('click', function(e) {
  38. document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
  39. });
  40. </script>
  41. </body>
  42. </html>

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价