高德地图模仿微信发送位置实现拾取坐标

这篇博客介绍了如何在高德地图中实现与微信定位一致的坐标拾取功能。通过利用高德地图的getCenter和setCenter方法,以及监听地图的移动事件,能够在用户拖动地图时实时获取并更新中心点坐标。同时,通过在地图上添加标记并调整,确保了用户体验与微信类似,降低了学习成本。在代码实现部分,展示了HTML和JavaScript的结合使用,包括地图初始化、点击和移动事件的绑定,以及坐标获取和设置的逻辑。

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

高德地图实现微信定位拾取坐标

效果图:

这个拾取模式是,地图中间的这个标记不动,拖动地图,处于这个点下方的坐标即为标记点。为了考虑用户的学习成本尽量低,保持与微信一致,便于操作。

在这里插入图片描述

实现思路:

定位位置:
可以利用高德的getCenter和setCenter方法,先绘制一个标记点到地图中心,调好大小位置。然后再利用定位把这个图标挪到和之前的标记点重合的位置即可。
拿到坐标:
那么每次移动地图,再用getCenter这个方法拿到坐标就行了。

效果图:

在这里插入图片描述
在这里插入图片描述

代码实现:
html:
<div class="map-wrap" @mousedown="clickMousedown" @mouseup="mouseup">
    <div id="map-gaode" class="map-gaode"></div>
    <img class="position-img" src="/static/img/position.svg" alt="">
</div>
js:
 initMap () {
    // 初始化地图
    map = new AMap.Map('map-gaode', {
      resizeEnable: true,
      zoom:13,
      // crs:'EPSG4326'
    })

    // 初始化中心点
    var nowPoint = map.getCenter()
    if(this.mapCenter){
      console.log(this.mapCenter,nowPoint)
      nowPoint = this.mapCenter
    }
    this.setCenter(nowPoint)
    this.setAddress(nowPoint)
    

    // 地图侧边栏
    AMap.plugin('AMap.ToolBar',function(){
      //加载工具条
      var toolbar = new AMap.ToolBar({
        position:'LB'
      });
      map.addControl(toolbar)
    })

    // 绑定点击事件
    let that = this
    var clickListener = AMap.event.addListener(map, "click", function(e) {
      var {lng, lat} = e.lnglat
      // 设置中心点
      that.setCenter(e.lnglat)

      //根据经纬度地址
      that.setAddress(e.lnglat)      
    })

    //移动事件
    map.on('moveend', (e)=>{
      console.log('需要初始化事件')
      if(that.mapSetting.input.canMove){
        var nowPoint = map.getCenter() 
        console.log('移动结束',nowPoint.toString())
        that.setCenter(nowPoint,true)
        setTimeout(()=>{
          that.mapSetting.input.canMove = false
        },100)
      }
    });
  }

setCenter(location,bool){
   map.setCenter([location.lng, location.lat])
 }
<think>好的,我需要帮助用户了解如何在高德地图实现类似微信的消息发送功能。首先,我需要回顾用户提供的引用内容,看看里面有没有相关的实现方法。引用[1]提到在高德地图应用中创建应用并申请key,引用[2]和[3]提到了地址选择和地图截屏的功能,可能和发送位置有关。 用户的问题主要是集成消息发送功能,可能是指发送实时位置或地址信息。根据引用中的内容,高德地图的SDK提供了周边搜索、关键字搜索和地图截屏的功能。这些可能用于获取位置信息,然后通过其他方式发送,比如分享到社交应用或自己的消息系统。 接下来,我需要整理步骤。首先,集成高德地图SDK,申请API Key,然后实现地图显示、定位、位置选择、截屏,最后分享功能。需要注意的是,消息发送本身可能依赖其他API,比如社交分享或后端服务,高德地图主要处理地理位置部分。 可能的问题包括如何获取位置信息、如何截屏并发送、如何集成第三方分享。需要确保每一步都正确配置,比如权限申请、SDK初始化。同时,引用[3]提到地图截屏的API,可以直接使用,这可能对发送位置截图有帮助。 最后,生成相关问题,考虑用户可能遇到的后续问题,比如性能优化、更多交互功能或错误处理。确保回答结构清晰,步骤明确,引用相关引用内容来支持说明。</think>### 高德地图实现类似微信的消息发送功能教程 #### 1. **基础环境配置** - **申请高德地图API Key** 前往[高德开放平台](https://lbs.amap.com/)创建应用,根据项目的`Bundle ID`(iOS)或`Package Name`(Android)申请Key,并配置SHA1指纹(Android)[^1][^2]。 - **集成SDK** 在项目中添加高德地图SDK依赖。例如,Android可通过Gradle引入: ```gradle implementation 'com.amap.api:3dmap:latest_version' implementation 'com.amap.api:location:latest_version' ``` #### 2. **实现核心功能** - **地图显示与定位** 初始化地图控件并开启定位,获取用户实时位置: ```java // Android示例 mMapView.onCreate(savedInstanceState); // 初始化地图 AMapLocationClient.startLocation(); // 启动定位 ``` - **位置搜索与选择** - **周边搜索**:调用`POI`搜索接口,根据中心点坐标获取周边地址列表[^2]。 - **关键字搜索**:实现搜索栏,通过`Inputtips`接口联想关键词并展示结果。 - **地图截屏与位置分享** 使用高德地图的截屏功能生成位置截图,保存至本地后通过社交分享接口发送[^3]: ```java aMap.getMapScreenShot(new AMap.OnMapScreenShotListener() { @Override public void onMapScreenShot(Bitmap bitmap) { // 保存bitmap并调用系统分享功能 } }); ``` #### 3. **消息发送集成** - **通过第三方SDK分享** 将位置信息(坐标+截图)集成至微信/QQ SDK,调用其分享接口: ```java // 微信分享示例(需集成微信SDK) WXMediaMessage msg = new WXMediaMessage(); msg.mediaObject = new WXImageObject(bitmap); SendMessageToWX.Req req = new SendMessageToWX.Req(); req.message = msg; IWXAPI api = WXAPIFactory.createWXAPI(context, APP_ID); api.sendReq(req); ``` #### 4. **关键配置与权限** - Android需添加以下权限: ```xml <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> ``` - iOS需在`Info.plist`中添加位置权限描述。 --- ###
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小郑有点困了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值