微信小程序腾讯地图大头针定位，获取当前地址，地图移动选点，定位当前位置

最新推荐文章于 2024-07-23 17:23:39 发布

小c欧巴

最新推荐文章于 2024-07-23 17:23:39 发布

阅读量9.5k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序地图大头针微信小程序定位当前位置腾讯地图移动选点微信小程序腾讯地图大头针定位微信小程序获取当前位置

本文链接：https://blog.csdn.net/summer_ck/article/details/89456675

版权

本文介绍了如何在微信小程序中实现地图功能，包括自动获取并显示用户当前位置，设置大头针定位，允许用户移动选点以及通过点击图标返回当前位置。详细代码实现包括app.json配置，map.wxml界面布局和map.js的逻辑处理，使用了腾讯地图的SDK。

摘要由CSDN通过智能技术生成

主要实现功能：

a.进入地图界面，会自动获取当前位置（用户需授权地理位置权限），并显示省市区在左上角，根据个人需求，我只显示了区
b.大头针实现，拖动地图，大头针都能获取到位置
c.左下角定位当前位置实现，当移动地图到别的位置，点击左下角图标，会回归到当前位置

下面是代码的实现
1. app.json文件中

  "permission":{
   "scope.userLocation":{
     "desc":"授权当前位置"
   }
  }

效果图

弹出授权权限的框，让用户手动授权

2. map.wxml 布局文件

<view class='view-c'>
<view class='view-top'>
<text style="font-size: 24rpx;margin-top: 40rpx;  color: #b65151">当前：{
  {district}}</text>
<input placeholder="输入城市"  class='input-c' bindinput="getsuggest" value="{
  {backfill}}" />
</view>
<!-- 搜索 -->
<view wx:for="{
  {suggestion}}" wx:key="index" class="{
  {showview?'hidden':'view-center'}}"