Html 高德地图搜索定位回显

雪翼冰尘

已于 2023-02-14 16:25:51 修改

阅读量471

点赞数

CC 4.0 BY-SA版权

文章标签： html 前端 javascript

于 2023-02-14 16:22:32 首次发布

本文链接：https://blog.csdn.net/u013735648/article/details/129028909

该代码示例展示了如何使用JavaScript集成高德地图API，包括创建地图、监听地图点击事件获取经纬度、设置自动完成搜索功能以及在地图上添加标记。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
   <title>Title</title>
   <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
   <script type="text/javascript">
       window._AMapSecurityConfig = {
           securityJsCode:'「您申请的安全密钥」',
       }
   </script>
   <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.5&key=您申请的key&plugin=AMap.Autocomplete"></script>
   <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>

<body>

       <div id="container"></div>
       <div id="myPageTop">
           <table>
               <tr>
                   <td>
                       <label>按关键字搜索：</label>
                   </td>
                   <td class="column2">
                       <label>左击获取经纬度：</label>
                   </td>
               </tr>
               <tr>
                   <td>
                       <input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
                   </td>
                   <td class="column2">
                       <input type="text" readonly="true" id="lnglat">

                   </td>
               </tr>
           </table>
       </div>
       <script type="text/javascript">
           var map = new AMap.Map("container", {
               resizeEnable: true
           });
           var marker;
           //为地图注册click事件获取鼠标点击出的经纬度坐标
           var clickEventListener = map.on('click', function(e) {
               document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()

               map.remove(marker);
               marker = new AMap.Marker({
                   position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat())
               });
               map.add(marker);
           });

           //自动完成
           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);
                   marker = new AMap.Marker({
                       position: new AMap.LngLat(e.poi.location.lng, e.poi.location.lat)
                   });
                   map.add(marker);
                   document.getElementById("lnglat").value = e.poi.location.lng + ',' + e.poi.location.lat;

               }
           }
       </script>
</body>