The uniapp applet accesses the Tencent map sdk

Create a new project.

---

Configure the uniapp configuration file to set the appid of the applet

Note: Anonymous users may have geolocation failures.

Check uniapp official website

---

Official website->api

uni.getLocation(OBJECT)
获取当前的地理位置、速度。

Attributes:

success anonymous function return value:

uni.getLocation({
    type: 'gcj02',
    success: function (res) {
        console.log('当前位置的经度：' + res.longitude);
        console.log('当前位置的纬度：' + res.latitude);
    }
});

Notice:

Automatic positioning in the project

---

Write positioning function at the application level life cycle position

The location of the h5 terminal configuration

Applet (wx)

Tencent map open platform application sdk

---

https://lbs.qq.com/

Log in to the open platform --- enter the console

After the key application is completed, the key is assigned as a backup.

Go to the official account to configure a secure domain name

腾讯服务器：
https://apis.map.qq.com

port default {
        methods: {
            getUserLocation() {
                console.log("111222");
                //使用定位api
                uni.getLocation({
                    type: "gcj02",
                    success(res) {
                        console.log(res);
                    },
                    fail(err) {
                        console.log(err);
                    }
                })
            },
        },
        onLaunch: function() {
            console.log('App Launch', this)
            this.getUserLocation();

        },

Note: The version library of the applet is too high and does not support the positioning api.

Download Tencent SDK

Unzip the project after downloading

Use qqmapsdk to convert latitude and longitude into Chinese data.

1.引入
//引入qqmap  sdk
import QQMapSdk from '../../common/qqmap-wx-jssdk.js'
//2.实例化对象
//调用 qqmapsdk
            getUserLocationInfo() {
                //实例化qqmap
                this.QQMap = new QQMapSdk({
                    key: "OCXBZ-BSUCV-SO3PY-UYLK6-A7IJE-MJBAJ"//密钥
                });
                //在调用qqmap 对应的API

            }
3.执行对应的api
//在调用qqmap 对应的API
                this.QQMap.reverseGeocoder({
                    location: {
                        latitude: this.lat,
                        longitude: this.long
                    },
                    success(res) {
                        console.log(res);
                        let {
                            address,
                            ad_info
                        } = res.result;
                        that.address = ad_info.city ? ad_info.city : '定位失败';
                    }
                });

Use the map map component

---

map

map component.

The map component is used to display the map, while the positioning API only obtains the coordinates, please do not confuse the two.

<map class="map" :markers="mks" :enable-3D="true" :longitude="long" :latitude="lat"></map>
详细属性看官网