Little white entry must see “WeChat small program map location development tutorial”

preface

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

Open Tencent location service

1. Enter the WeChat public platform

2. Log in and enter the background of small program, select “development-development tools-Tencent location service”.

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

4. Use WeChat to scan code for authorization

5. Bind the developer account

Access to the plugin

1. Select “Settings – Third Party Settings – Plugin Management” in the background of small program, and click “Add Plugin”.

2, search “Tencent location service map selection” to add

Developer key configuration

1. Request developer key

2. Set Key’s “Enable Product”

A. Tick the WeChat applet to set the authorized APP ID

Authorized APP ID can be viewed through the account information of “Settings – Basic Settings”

B. Tick “WebService API”

The applet plug-in needs to use part of the WebService API, so you need to configure the permissions for the keys that use this functionality.

If you whitelist the domain name, you need to add the domain name servicewechat.com to the whitelist, otherwise the applet will not be able to use the WebServiceAPI service normally.

Use of plug-ins

1. Introducing plug-ins

Map selection point appId: wx76a9a06e5b4e693e

// app.json {"plugins": {"chooseLocation": {"version": "1.0.5", "provider": "wx76a9a06e5b4e693e"}}

2. Set location authorization

Map selection plug-in requires the applet to provide location authorization in order to use the location function

// app.json {"permission": {"scope.userLocation": {"desc": "Your location information will be used to locate the applet"}}}

3. Code implementation

A, JS code

"use strict"; const chooseLocation = requirePlugin('chooseLocation'); Page({ data: { address: "", locationName: "" }, onShow: Function () {// After returning from the map selection plugin, the plugin interface can be called in the onShow lifecycle function of the page to retrieve the selection result object // Click the confirm selection button to return the result object, Otherwise it returns null const location = chooseLocation. GetLocation (); if(location){ this.setData({ address: location.address? location.address : "", locationName: location.name?location.name : "" }); }}, // showMap() {// Use the key (required) const key in the Tencent Location Service application = ""; // The name of the app calling the plugin (required) const referer = ""; wx.navigateTo({ url: 'plugin://chooseLocation/index? key=' + key + '&referer=' + referer }); }});

The plugin: / / chooseLocation/index interface parameters:

B. WXML code

<! --index. WXML --> <view class="container"> <button bindTap ="showMap"> </button> <view style="margin-top:10px" {{address? }</view> <view style="margin-top:10px" }</view> </view>

4, effect realization

Author: Summer warm fleeting time

Link: https://blog.csdn.net/j123123…

Source: CSDN

The copyright belongs to the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please note the source.