preface

At present, Tencent location service provides route planning, map selection, metro map, city selector plug-in four plug-in products, this blog mainly for map selection function to achieve.

Open Tencent location service

1. Access the wechat public platform

2. Log in to the small program background and choose “Development – Development Tools – Tencent Location Service”.

3. Click “Open” to enter the authorization code scanning interface

4. Use wechat scan code for authorization

5. Bind the developer account

Access to the plugin

1. In the background of the small program, choose “Settings – third-party Settings – Plug-in Management” and click “Add plug-in”.

2. Search “Tencent Location service map selection” to add

Developer Key Configuration

1. Apply for developer key

2. Set “Enable Product” for KEY

A. Check the wechat mini program and set the authorized APP ID

You can view the authorized APP ID using the account information in Settings – Basic Settings

B. Select WebService API.

The applets need to use some services of the WebService API, so you need to configure permissions for keys that use this function.

If you have entered a domain name whitelist, add the servicewechat.com domain name to the whitelist. Otherwise, the WebServiceAPI service cannot be used under the mini-program.

Use of plug-ins

1. Introduce plug-ins

Map selection appId: Wx76a9a06e5b4e693e

Json {"chooseLocation": {"version": "1.0.5", "provider": "wx76a9a06e5b4e693e"}}}Copy the code

2. Set location authorization

The map selection plug-in requires location authorization from the applet to function properly

// app.json {" Permission ": {"scope.userLocation": {"desc": "Your location information will be used for small program location"}}}Copy the code

3. Code implementation

A, JS code

"use strict"; const chooseLocation = requirePlugin('chooseLocation'); Page({ data: { address: "", locationName: "" }, onShow: Function () {function () {function () {function () {function () {function () {function () {function () { Otherwise it returns null const location = chooseLocation. GetLocation (); if(location){ this.setData({ address: location.address? location.address : "", locationName: location.name?location.name : "" }); }}, // display map showMap() {// Use the key applied in Tencent location service (required) const key = ""; // Referer = ""; wx.navigateTo({ url: 'plugin://chooseLocation/index? key=' + key + '&referer=' + referer }); }});Copy the code

The plugin: / / chooseLocation/index interface parameters:

B. WXML code

<! --index.wxml--> <view class="container"> <button bindtap="showMap"> {{address? </view> <view style="margin-top:10px"> </view> </view>Copy the code

4. Effect realization

Author: Summer warm time

Link: blog.csdn.net/j1231230/ar…

Source: CSDN

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.