微信小程序实现地图选点并存储

微信小程序对于刚接触的开发者来说,很容易一头雾水,但是仔细研究的话也不是特别难,最近正好接手了一个名片小程序项目,需求中刚好用到了微信地图组件,废话不多说,上图上代码。

为了提高用户体验,需要实现地图选点功能。

思路如下,点击按钮调用微信API接口,存储数据库。

微信小程序实现地图选点并存储_第1张图片

1、调用接口前,需要先获取用户权限。

网址:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html

微信小程序实现地图选点并存储_第2张图片

很简单,在app.json中加入几句话即可,desc属性值可以随意更改。

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

微信小程序实现地图选点并存储_第3张图片

2、调用接口

wxml写法:

js写法:返回值res,不懂得可以自己console.log()看一下,然后渲染到页面显示,最后form表单提交一下,存储完事!

getLocation: function () {
    var _this = this;
    wx.chooseLocation({
      success: function (res) {
        var name = res.name
        var address = res.address
        var tude = res.latitude+','+res.longitude
        _this.setData({
          address_name: name,
          address: address,
          tude: tude
        })
      },
      complete(r) {
        console.log(r)
        console.log(222)
      }
    })
  },

 

你可能感兴趣的:(微信小程序)