mpvue小程序框架-地图定位(二)

使用腾讯地图定位
需要使用微信公众平台permission接口
首先要在小程序项目下的主配置文件app.json中声明permission，
不然使用接口方法时，提示窗口如下：

app.json配置文件中声明permission

  "pages":["pages/home/main"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" 
    }
  },
    "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },

腾讯位置服务
腾讯位置服务为微信小程序提供了

• 基础的标点能力、
• 线和圆的绘制接口等地图组件和位置展示、
• 地图选点等地图API位置服务能力支持

JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，

• 可以在小程序中调用腾讯位置服务的POI检索、
• 关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务

使用腾讯位置服务的准备工作有哪些？

• 申请开发者密钥（key）：申请密钥
  使用已登录的微信开发者账号，通过手机号绑定，或者重新注册新账号申请秘钥，
  这里就使用自己的开发者账号了。
  

• 开通webserviceAPI服务：【控制台】 -【key管理】 -【 设置】（使用该功能的key）- 勾选webserviceAPI -【 保存】
  (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
  配置微信位置服务，需要之前申请的Key名称、勾选启用产品后的【微信小程序】与【WebServiceAPI】-【域名白名单】，然后保存即可。
  
  秘钥名称及秘钥值
  

• 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2

• 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

配置request合法域名

保存提交，配置完成后，我们在微信开发者工具-【项目配置】中，看到配置好的request合法域名

注意：引入qqmap-wx-jssdk时，解决mpvue不支持 commonjs规范的问题
修改.babellrc文件，plugins添加"transform-es2015-modules-commonjs"

  "plugins": ["transform-runtime","transform-es2015-modules-commonjs"]

示例如下：
定位 pages/home/main.js

let QQMapWx = require('../utils/qqmap-wx-jssdk.min.js'); //引入SDK核心类
let qqmapsdk = new QQMapWx({
   // 秘钥（你自己注册的账号申请的），这里我使用的是用自己的微信开发者账号申请的秘钥
   key:'3D2BZ-QT3WX-NLJ4I-74S5M-5QNLT-QEF6P'
})
Page({
  /*页面的初始数据*/
  data: {
    address:"加载中"
  },

  /*生命周期函数--监听页面加载*/
  onLoad: function onLoad(options) {
    wx.getLocation({
      type: 'wgs84',
      // 使用箭头函数
      success: (res) => {
        console.log(res)
        qqmapsdk.reverseGeocoder({
          location: {
            // 纬度
            latitude: res.latitude,
            // 经度
            longitude: res.longitude
          },
          success: r => {
            console.log(r.result.address_component.city)
            this.address = r.result.address_component.city
          }
        })
      }
    })
  }

初版 pages/home/main.wxml

<view class="homContainer"> 
  <!-- 加载，登录 -->
  <view class="load-user">
    <text>{{address}}</text>
    <image src="../../images/people.png"></image>
  </view>
  <!-- 服务 -->
  <view class="serviceContainer">
  <view class ="serviceItem">
    <image src="../../images/eat.png"></image>
    <text>美食</text>
  </view>
  <view class ="serviceItem">
    <image src="../../images/ktv.png"></image>
    <text>KTV</text>
  </view>
  <view class ="serviceItem">
    <image src="../../images/foot.png"></image>
    <text>足疗/按摩</text>
  </view>
  <view class ="serviceItem">
    <image src="../../images/hotel.png"></image>
    <text>酒店</text>
  </view>
  <view class ="serviceItem">
    <image src="../../images/improve.png"></image>
    <text>丽人/美发</text>
  </view>
  </view>

   <!--猜你喜欢  -->
  <view class="guessLike"> 
    <text>猜你喜欢</text>
  </view>

  <view class="guessContainer">
    <view class="guessItem">
    <!-- 图片 -->
      <view class="guessImg">
        <image src="../../images/eatPicture.png">
        </image>
      </view>
    <!-- 描述 -->
      <view class="guessTxt">
        <text class="itemName">大碗居（万柳店）</text>
        <view class="star">
          <image src="../../images/b-star.png"></image>
          <image src="../../images/b-star.png"></image>
          <image src="../../images/b-star.png"></image>
          <image src="../../images/b-star.png"></image>
          <image src="../../images/b-star.png"></image>
        <text>￥81/人</text>
        </view>
        <text class="foodStyle">草桥 北京菜</text>
      <!-- 点评 -->
      <view class="comment">
        <text>古色古香</text>
        <text>菜色精致</text> 
        <text>菜色精致</text> 
        <text>彩色精致</text> 
      </view>     
    </view>
    </view>

    <view class="guessItem">
      <view class="guessImg">
        <image src="../../images/eatPicture.png"></image>
      </view>
      <view class="guessTxt">
        <text class="itemName">大碗居（万柳店）</text>
         <view class="star">
          <image src="../../images/b-star.png"></image>
          <image src="../../images/b-star.png"></image>
          <image src="../../images/b-star.png"></image>
          <image src="../../images/b-star.png"></image>
          <image src="../../images/b-star.png"></image>
        <text>￥81/人</text>
        </view>
        <text class="foodStyle">草桥 北京菜</text>
        <view class="comment">
          <text>古色古香</text>
          <text>菜色精致</text> 
          <text>菜色精致</text> 
          <text>彩色精致</text> 
        </view>
      </view>
  </view>
  </view>

  <view class="loadMore">
    <text>正在加载更多内容......</text>
  </view>
</view>

初版 pages/home/main.wxss

.load-user{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #181818;
  color:#BA9672 ;
}
.load-user text{
  display: flex;
  padding: 20rpx;
}
.load-user image{
  display: flex;
  width: 60rpx;
  height: 60rpx;
  padding: 20rpx;
}
.serviceContainer{
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}
.serviceItem{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.serviceItem image{
  width: 100rpx;
  height: 100rpx;
  padding:20rpx;
}

.guessLike{
  color: lightgray;
  padding: 20rpx;
}

.guessContainer{
  display: flex;
  flex-direction: column;
}
.guessItem{
  display: flex;
  flex-direction: row;
  padding: 20rpx;
}
.guessItem>.guessImg image{
  display: flex;
  width: 150rpx;
  height: 150rpx;
}
.guessTxt{
  display: flex;
  flex-direction: column;
  padding-left: 20rpx;
}
.guessTxt .itemName{
  font-weight: bold;
}
.guessTxt .star image{
  width: 30rpx;
  height: 30rpx;
}
.guessTxt .foodStyle{
  color: #758897;
}
.comment text{
  font-size: 26rpx;
  color: #758897;
  border: 2rpx solid lightgray;
  margin-right: 10rpx ;
}

.loadMore{
  height: 50rpx;
  font-size: 26rpx;
  text-align: center;
  margin-top: 20rpx;
  line-height: 30px;
  background-color: #F0F0F0;
}

控制台输出地点及该地地理坐标，如下：