输入地址换取经纬度（小程序）

wxml

<form bindsubmit='getCoordinate'>
    <input placeholder='请输入省市区' name="city"></input>
    <input placeholder='请输入详细地址' name="home"></input>
    <button form-type='submit'>提交</button>
</form>
<view class='cont'>
    <view>经度：<text>{{longitude}}</text></view>
    <view>纬度：<text>{{latitude}}</text></view>
</view>

wxss

form{
  display: block;
  width: 80%;
  padding: 30rpx 0;
  box-sizing: border-box;
  margin: 0 auto;
}
input{
  border: 2px solid #f5f5f5;
  width: calc(100% - 4rpx);
  height: 80rpx;
  margin: 35rpx 0;
  border-radius: 40rpx;
  font-size: 30rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
}
button,.button-hover{
  width: 100%;
  height: 80rpx;
  border-radius: 40rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  color: #fff;
  background: #EA472C;
  margin-top: 80rpx;
}
button::after{
  content:'';
  border: none;
}
.cont{
  margin-top: 60rpx;
}
.cont view{
  text-align: center;
  color: #666;
}
.cont view text{
  color: #282828;
}

js

var QQMapWx = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWx({
  key: 'C7YBZ-WP76X-4EA4Z-TM3CO-YF7RK-ETBOD'
})
  data: {
    latitude:'',       //纬度
    longitude:''       //经度
  },
  getCoordinate:function(e){
    var that = this
    var {city,home} = e.detail.value
    qqmapsdk.geocoder({
      address:city + home,
      success:function(res){
        console.log(res)
        that.setData({
          latitude:res.result.location.lat,
          longitude:res.result.location.lng
        })
      }
    })
  },