三方地图 微信小程序篇

微信小程序篇：

首先创建一个项目要选择：

然后进入项目，先设置获取经纬度的页面非常的简单看下图：

<form bindsubmit="chakanweizhi">

  <view>

    经度 <input name="jingdu" type="text" value="{{jingdu}}" />

  </view>



  <view>

    维度 <input name="weidu" type="text" value="{{weidu}}" />

  </view>



  <view>

    地址 <input name="dizhi" type="text" value="{{dizhi}}" />

  </view>



  <view>

    名称 <input name="mingcheng" type="text" value="{{mingcheng}}" />

  </view>

  <view>

    <button type="primary" bindtap="huodeweizhi">getLocation获取经纬度</button>

    <button type="primary" form-type="submit">openLocation获取当前位置</button>

  </view>

</form>

代码就是这样非常方便然后设置css样式

​​​​​​​​​​​​​​page {
  padding: 10px;
  box-sizing: border-box;
}

input {
  border: 1px solid black;
  border-radius: 5px;
}
button{
  margin-top: 10px;
}

接下来就是配置

获取经纬度

​​​​​​Page({
  data: {
    jingdu: "",
    weidu: "",
    dizhi: "",
    mingcheng: ""
  },
  //获取经纬度
  huodeweizhi: function () {
    var that = this
    wx.getLocation({
      success: function (res) {
        console.log(res);
        that.setData({
          jingdu: res.longitude,
          weidu: res.latitude,

        })
      }
    })
  },

然后就是在页面显示输出到页面

 //根据经纬度在地图上显示
  chakanweizhi: function (e) {
    console.log("表单提交了");
    console.log("经度:" + e.detail.value.jingdu);
    console.log("经度:" + e.detail.value.weidu);
    wx.openLocation({
      latitude: Number(e.detail.value.weidu),
      longitude: Number(e.detail.value.jingdu)
    })
  },

接下来就是在app.json当中的引用：

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

然后就上页面了效果图奉上：