效果

image.png image.png
image.png

代码

.wxml

<view class="wrapper">
  <view class="page-body">
    <view class="page-body-wrapper">
      <form bindsubmit="openLocation">
        <view class="page-body-form">
            <text class="page-body-form-key">经度</text>
            <input class="page-body-form-value" type="text" value="{{location.longitude}}" name="longitude"></input>
            <text class="page-body-form-key">纬度</text>
            <input class="page-body-form-value" type="text"  value="{{location.latitude}}" name="latitude"></input>
        </view>
        <view class="page-body-buttons">
          <button class="page-body-button" type="default" bindtap="getLocation">获取地理位置</button>
          <button class="page-body-button" type="default" formType="submit">查看地理位置(腾讯地图)</button>

        </view>
      </form>
      <button bindtap='openLocation'>get方式地图接口</button>
    </view>
  </view>
</view>

.js

var app = getApp()
Page({
  data: {
    //默认未获取地址
    hasLocation: false
  },
  //获取经纬度
  getLocation: function (e) {
    console.log(e)
    var that = this
    wx.getLocation({
      success: function (res) {
        console.log(res)
        that.setData({
          hasLocation: true,
          location: {
            longitude: res.longitude,
            latitude: res.latitude
          }
        })
      }
    })
  },
  //根据经纬度在地图上显示
  openLocation: function (e) {
    var value = e.detail.value
    wx.openLocation({
      // longitude: Number(value.longitude),
      // latitude: Number(value.latitude)
      longitude: 116.430392,
      latitude: 39.85799,
      name:"今朝装饰",
      address:"丰台区东铁营顺一条8号"
    })
  }
})