Mini program mpvue locates the real location

1. Get the current geographic location and speed. Fill in onLoad in the required file

Sample code:

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      province"加载中。。。"
      
    };
  },
  onLoad() {
    
    
    wx.getLocation({
    
    
      type: "wgs84",
      success: (res)=> {
    
    
        console.log(res);//获取经纬度
        const latitude = res.latitude;
        const longitude = res.longitude;
        const speed = res.speed;
        const accuracy = res.accuracy;
      },
    });
  },
};
</script>

2. Fill in the pages below in app.json

{
    
    
    "permission": {
    
    
      "scope.userLocation": {
    
    
        "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
      }
    },
 

3. Please click the official steps

  • Sign in to add an app

Insert picture description here

  • Download " JavaScriptSDK v1.2
    open and putInsert picture description here
    • Add domain name (set legal domain name of request, add https://apis.map.qq.com)Insert picture description here

4. Fill in the required documents

// 引入SDK核心类

var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');//注意路径
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    
    
    key: '' // 必填  刚刚注册的密钥
});  

5. Save is being given just pull in a file error Cannot assign to read only property 'exports' of object '#<Object>'this time the need to modify the file, add .babelrc,"transform-es2015-modules-commonjs"

Insert picture description here

6. Start to get the real location

 qqmapsdk.reverseGeocoder({
    
    
          //位置坐标,默认获取当前位置,非必须参数
          //Object格式
          location: {
    
    
            latitude: latitude,
            longitude: longitude,
          },
          success: result => {
    
    
            console.log(result)//可以看出所在地
            console.log(result.result.address_component.province) //可以看出所在省
            const province = result.result.address_component.province
            this.province = province
          }
        });

Code diagram:
Insert picture description here

Guess you like

Origin blog.csdn.net/weixin_54645059/article/details/113739338