高德地图：在地图中以点击的位置生成一个marker

最新推荐文章于 2025-02-08 02:42:15 发布

奚大野...

最新推荐文章于 2025-02-08 02:42:15 发布

阅读量502

点赞数

分类专栏：高德地图文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_41752378/article/details/129436446

版权

高德地图专栏收录该内容

11 篇文章

订阅专栏

当用户在地图上点击时，获取点击位置的经度和纬度，然后询问用户是否以此为设备坐标。如果用户确认，更新输入字段的值，并显示一个Marker图标在地图上的点击位置。同时，清除已有Marker并添加新的。

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

map.on('click',function(e){
   let lng = e.lnglat.getLng(), lat = e.lnglat.getLat();
   if(lng && lat){
     var mymessage = confirm("是否以当前位置作为设备经纬度地址?");
     if(mymessage == true){
       let dom = document.getElementById('lnglat')
       dom.value = `${lng},${lat}`;
       //显示marker点
       markerOpen(lng,lat)
       /*
         el --- input 元素
         dispatchEvent() --- 给节点分派一个合成事件；
           该方法将分派一个合成事件，它由 Document.createEvent() 创建，
           由 Event 接口或它的某个子接口定义的初始化方法初始化。
           调用该方法的节点将成为事件的目标节点，该事件在捕捉阶段中第一次沿着文档树向下传播。
           如果该事件的 bubbles 属性为 true，那么在事件的目标节点自身处理事件后，它将沿着文档树向上起泡
         new Event('input') --- 给元素分配 input 事件
       */
       // dom.dispatchEvent(new Event('input'));
     }
   }
 })

function markerOpen(lng,lat){
   map.remove(markers)
   markers = [];
   let imgsrc1 = require('@/assets/gif/g1.gif');
   if(!lng || !lat){return};
   markers.push(new AMap.Marker({
     map:map,
     position:[lng,lat],
     icon:new AMap.Icon({image:imgsrc1,imageSize:new AMap.Size(10,10)}),
     offset: new AMap.Pixel(-5, -5)
   }))
 }