微信小程序实现腾讯地图定位功能修改地址功能

微信小程序实现腾讯地图定位功能修改地址功能

效果图

前言

大家开发小程序的时候都会遇到想使用微信小程序的地图定位功能来精确的知道自己所处的地理位置，这对于外卖，跑腿类小程序是至关重要的。今天我们就来看看如何实现这一功能吧。
要实现精确定位光靠微信自带的地图功能是远远不够的，所以我这里采用了腾讯地图的导入，从而实现了。使用之前大家先去注册一个账号，然后完成以下配置。先登录进去，然后进入控制台，添加应用，设置如下。
腾讯地图官网地址:腾讯地图官网

然后得到 key这是最重要的，我们后面会用到它。
这样我们的准备工作就做好了，开始着手实现起来。

界面结构

我这边做的是一个地址选择定位到相应学校的功能，页面结构代码及效果图如下。

<!--pages/checkSchool/checkSchool.wxml-->
<!-- 弹出选择学校 -->
<view class="adress">当前地址:<text>{
   {
   adressObj.province+adressObj.city+adressObj.district}}</text>
  <text class="ico iconfont icon-weizhi" bindtap="changeAddress"></text>
</view>
<view>
  
<picker bindchange="bindPickerChange" value="{
   {index}}" range="{
   {array}}" wx:if="{
   {!bindSchool}}" range-key="title">
    <view class="picker">
    当前选择：<text>{
   {
   array[index].title}}</text>
    <image src="../../image/mine/tipp.png"></image>
    </view>
</picker>
<view class="revice_address_row" wx:if="{
   {!bindSchool}}">
  <view class="address_btn">
    <button class="sureBtn" type="primary" size="mini" bindtap="handleSublme">提交信息审核</button>
  </view>
</view>

点击地址小图标将会跳转到map地图界面