<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>基本地图展示</title>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=你的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>

<body>

  <tr>
    <td height="25" align="center" bgcolor="#FFF9DF">经度：</td>
        <td colspan="3" align="left" bgcolor="#FFFFFF" class="t5">
          <div align="left">
            <input name="lon" id="lon" readonly="true" type="number" step=0.0001 value="" size="70" />
          </div>
        </td>
  </tr> 
  <tr>
    <td height="25" align="center" bgcolor="#FFF9DF">纬度：</td>
        <td colspan="3" align="left" bgcolor="#FFFFFF" class="t5">
          <div align="left">
            <input name="lat" id="lat" readonly="true" type="number" step=0.0001 value="" size="70" />
          </div>
        </td>
    </tr>
    <!---->
     <tr>
      <td height="25" align="center" bgcolor="#FFF9DF">选取经纬度：</td>
        <td colspan="3" align="left" class="t5">
          <div style="width:100%;height:500px;" id="container"></div>
        </td>
       </tr>
        
    <tr>
   

</body>

<script>
    

    
    var map = new AMap.Map("container", {
        resizeEnable: true,
           zoom:15,
          //center: [116.397428, 39.90923] 
        });

    var marker = new AMap.Marker({
        position: map.getCenter(),
        //draggable: true,
        cursor: 'move',
        raiseOnDrag: true
    });

    marker.setMap(map);
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    var clickEventListener = map.on('click', function(e) {
        //alert(e.lnglat.getLng());
        document.getElementById("lon").value = e.lnglat.getLng();
        document.getElementById("lat").value = e.lnglat.getLat();
        
        marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]); //
    });

    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });

    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    
    function select(e) {
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
        }
    }
    
</script>
</html>

# javascript
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区