资讯专栏INFORMATION COLUMN

小程序和腾讯地图联合使用

Prasanta / 2217人阅读

摘要:小程序自己已经提供了获取当前位置的经纬度选择周围的地址打开地图效果图遇到什么问题,需要解决现在知道详细的地址,但是不知道经纬度,所以,无法定位,腾讯官方也提供了一些地图的扩展具体的如何引入腾讯请看官方文档实际例子,看代码在生命周期里面使用,

1 小程序自己已经提供了
wx.getLocation /*获取当前位置的经纬度*/
wx.chooseLocation /*选择周围的地址*/
wx.openLocation  /*打开地图*/

效果图

2 遇到什么问题,需要解决

现在知道详细的地址,但是不知道经纬度,所以,无法定位,腾讯官方也提供了一些地图的扩展 具体的如何引入component腾讯请看官方文档

实际例子,看代码,

在onShow 生命周期里面使用,我这里只是一个例子,具体在哪里使用,得根据你们自己的业务逻辑啦~~~
具体的git 地址

   import QQMapWX from "../../plugins/qqmap-wx-jssdk";
   const qqmapsdk = new QQMapWX({ key: "申请的key"});
   onShow:function(){
    qqmapsdk.geocoder({
        address: "北京市朝阳区大山子兆维大厦A座",
        success: function (res) {
          console.log(res,"------");
          wx.openLocation({
          name: `${res.result.address_components.province}-${res.result.address_components.district}`,
          address: `${res.result.address_components.province}${res.result.address_components.district}${res.result.title}`,
          latitude: res.result.location.lat,
          longitude: res.result.location.lng
      })
        },
        fail: function (res) {
          console.log(res);
        },
        complete: function (res) {
          //console.log(res,"------77777");
        }
      })
    })
       }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93540.html

相关文章

  • 程序开发总结(一)

    摘要:最近在开发一个小程序项目准备上线中也是第一个做的小程序中间遇到很多坑通过自己不断实践和努力解决了也分享给大家,缩短大家的开发时间。 最近在开发一个小程序项目准备上线中也是第一个做的小程序中间遇到很多坑通过自己不断实践和努力解决了也分享给大家,缩短大家的开发时间。 一、修改背景颜色这是一个很常见的需求在html的中我们可以改变body&html的标签颜色,但是在小程序中你可以通过两种方法...

    haoguo 评论0 收藏0
  • 程序开发总结(一)

    摘要:最近在开发一个小程序项目准备上线中也是第一个做的小程序中间遇到很多坑通过自己不断实践和努力解决了也分享给大家,缩短大家的开发时间。 最近在开发一个小程序项目准备上线中也是第一个做的小程序中间遇到很多坑通过自己不断实践和努力解决了也分享给大家,缩短大家的开发时间。 一、修改背景颜色这是一个很常见的需求在html的中我们可以改变body&html的标签颜色,但是在小程序中你可以通过两种方法...

    honmaple 评论0 收藏0
  • 程序开发总结(一)

    摘要:最近在开发一个小程序项目准备上线中也是第一个做的小程序中间遇到很多坑通过自己不断实践和努力解决了也分享给大家,缩短大家的开发时间。 最近在开发一个小程序项目准备上线中也是第一个做的小程序中间遇到很多坑通过自己不断实践和努力解决了也分享给大家,缩短大家的开发时间。 一、修改背景颜色这是一个很常见的需求在html的中我们可以改变body&html的标签颜色,但是在小程序中你可以通过两种方法...

    marser 评论0 收藏0

发表评论

0条评论

Prasanta

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<