微信小程序坐标转地址逆地址解析(逆地理编码)

 博主介绍:本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮助到您;

🍅希望此文章可以帮助到您🍅

微信小程序文章推荐

微信小程序布局图片上面显示文字

微信小程序实现左边图片右边文字效果

微信小程序获取当前日期和时间

  微信小程序绘制地图轨迹线路

微信小程序绘制marker

微信小程序之绘制多个marker以及调用手机地图软件导航

效果显示

 说明:此图是获取用户的详细坐标之后;进行坐标解析之后得到的详细地址信息

一、前端界面

<view class="mapshow">

  <map class="mapUI" id="myMap" markers="{{markers}}"  latitude="{{latitude}}" longitude="{{longitude}}" covers="13" ></map>

</view>

二、js逻辑处理

1:定位数据

首先是进行定位数据的获取;当然你可以根据自己的需求api接口获取数据也是可以的;

    wx.getLocation({

      isHighAccuracy: true, // 开启地图精准定位

      type: 'gcj02', // 地图类型写这个

      success: res => {

        console.log(res);

        this.setData({

          mylatitude: res.latitude,

          mylongitude: res.longitude,

          location: res,

          latitude: res.latitude,

          longitude: res.longitude

        })

      },

    })

                     

2:坐标解析

 对于坐标解析调用的是腾讯地图的api接口;具体的可以查看地址:WebService API | 腾讯位置服务

  var qqMapApi = 'https://apis.map.qq.com/ws/geocoder/v1/' + "?location=" 纬度 ',' +

经度 + "&key=" + '您申请的key' + "&get_poi=1";

3:获取地址

 sendRequest: function (qqMapApi) {
    const that = this
    wx.request({
      url: qqMapApi,
      header: {
        'Content-Type': 'application/json'
      },
      data: {},
      method: 'GET',
      success: (res) => {

        let mapAddress = [];
        mapAddress.push({
          id: 9001,
          latitude: that.data.mylatitude,
          longitude:that.data.mylongitude,
          name: "终点",
          iconPath: '../image/markerimage.png',
          content: "111",
          width: '34px',
          height: '34px',
          callout: {
            content: res.data.result.address,
            padding: 5,
            fontSize: 12,
            textAlign: 'center',
            display: 'ALWAYS',
            borderRadius: 5,
            borderWidth: 1,
            bgColor: '#ffffff',
            borderColor: "#40ac44"
          }
        }),

          this.setData({
            markers: mapAddress,
          })


        that.setData({
          markers: mapAddress,
        });

      }
    })

  },

 说明:通过调用api的方法就可以获取到详细的地址信息;对于地址的用途你可以根据自己的需求去处理就可以了

三、留个脚印吧

大家要是感觉此篇文章有意义;那就给个关注、点赞,收藏吧;

🍅也可以关注文档末尾公众号🍅

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Android毕业设计源码

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

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

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

打赏作者

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

抵扣说明:

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

余额充值