preface
The first time to use Tencent location service is also quite early, was used in the Web end. Later, I gradually came into contact with small programs. Once, I wanted to display all kinds of shops nearby so that I could quickly locate the delicious places around me. Then travel to a place each time, we need a requirement is necessary on WC, was thinking about how to use a map to realize quickly locate the position of the surrounding the WC, and walking routes, right now, tencent location service function can be directly above the small program used directly, with the giant power could be a good play to achieve the function demand.
Therefore, writing this article is also hoping to summarize the steps and knowledge points of Tencent location service function, so as to facilitate the development of peers to quickly get started and use it.
To apply for the Key
Create a Key Key for your business or a scene, have this Key, you can start to experience the map function! Direct wechat scan code authorization login, Tencent list function using wechat scan code login is much more convenient, eliminating the old need password login good way.
Set the domain name
Small program management background -> Development -> Development Management -> Development Settings -> “Server Domain name” set the request legitimate domain name, add apis.map.qq.com
The introduction of js
Click the wechat small program JavaScript SDK in the development document on the official website to download it
// Introduce SDK core classes, js files according to their own business, location can be placed by themselves
var QQMapWX = require('.. /.. /libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
data: {longitude:'113.390451'.latitude:'23.048914'
},
onLoad: function () {
// Instantiate the API core class
qqmapsdk = new QQMapWX({
key: 'XXXX-xxxx, the key you applied for by yourself'
});
},
onShow: function () {
// Call the interface
qqmapsdk.search({
keyword: Guangzhou University Town.success: function (res) {
//console.log(res);
},
fail: function (res) {
//console.log(res);
},
complete: function (res) {
console.log(res); }}); }})Copy the codeUse a map
Use the map component. You can log in the official document of wechat to view the specific parameters
NavigationStyle: “navigationStyle”: “navigationStyle”: “navigationStyle”: “navigationStyle”: “navigationStyle”
Default rendering
Without setting any map component parameters, the default is as follows
The view code
<view class='view'>
<map longitude="{{longitude}}" latitude="{{latitude}}"></map>
</view>
Copy the codeAccording to mark
Add an annotation to the default coordinates. The annotation can be an array of coordinates, and the effect on the map is multiple annotation points
Marker: A marker used to display the position of a marker on a map
[{longitude:’113.390451′,latitude:’23.048914′}] Markers: [{longitude: ‘113.390451’, latitude: ‘23.048914’}, {longitude: ‘113.390451’, latitude: ‘23.048914’}]
- Bindmarkertap: Triggered when a marker is clicked
- Bindlabeltap: Triggered when a point label is clicked
- Bindcallouttap: Triggered when the bubble corresponding to the marker is clicked
Default annotation effect
Js code
// Introduce SDK core classes, js files according to their own business, location can be placed by themselves
var QQMapWX = require('.. /.. /libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
data: {longitude:'113.390451'.latitude:'23.048914'.markers: [{longitude:'113.390451'.latitude:'23.048914'}},onLoad: function () {
// Instantiate the API core class
qqmapsdk = new QQMapWX({
key: 'XXXX-xxxx, the key you applied for by yourself'
});
},
onShow: function () {
// Call the interface
qqmapsdk.search({
keyword: Guangzhou University Town.success: function (res) {
//console.log(res);
},
fail: function (res) {
//console.log(res);
},
complete: function (res) {
console.log(res); }}); }})Copy the codeThe view code
<view class='view'>
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"></map>
</view>
Copy the codeAnnotated display text
Js code effect
Js code
// Key code
// Tags are used to define the attributes of the panyu university (guangzhou).
data: {markers: [{label: {content:Guangzhou Panyu University Town},longitude:'113.390451'.latitude:'23.048914'}},Copy the codeWC Route Planning
There are also style Settings below, such as arrows, and line colors, and text displays for starting and ending points, which are purely default parameters
Js code
// Introduce SDK core classes, js files according to their own business, location can be placed by themselves
var QQMapWX = require('.. /.. /libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
data: {longitude:'113.390451'.latitude:'23.048914'.markers: [{label: {content:Guangzhou Panyu University Town},longitude:'113.390451'.latitude:'23.048914'}},onLoad: function () {
// Instantiate the API core class
qqmapsdk = new QQMapWX({
key: 'XXXX-xxxx, the key you applied for by yourself'
});
},
onShow: function () {
// Call the interface
qqmapsdk.search({
keyword: 'GoGo toilet'.success: function (res) {
//console.log(res);
},
fail: function (res) {
//console.log(res);
},
complete: function (res) {
console.log(res); }}); },// Trigger the form submission event to invoke the interface
formSubmit(e) {
// Start coordinates: 23.048914,113.390451
// End coordinates: 23.061793,113.392056
/ / 23.061793, 113.392056
/ / 23.063073, 113.391762
var _this = this;
// Call the distance calculation interface
qqmapsdk.direction({
mode: 'driving'.// Optional values: 'driving', 'walking', 'bicycling', left blank default: 'driving', left blank
// The from parameter does not contain the default current address
from: e.detail.value.start,
to: e.detail.value.dest,
success: function (res) {
console.log(res);
var ret = res;
var coors = ret.result.routes[0].polyline, pl = [];
// Coordinate decompression (return point string coordinates, compressed by forward difference)
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
// Place the extracted coordinates in the dot string array pl
for (var i = 0; i < coors.length; i += 2) {
pl.push({ latitude: coors[i], longitude: coors[i + 1]})}console.log(pl)
// Set the polyline property to display the path, using the first data from the decompressed coordinates as the starting point
_this.setData({
latitude:pl[0].latitude,
longitude:pl[0].longitude,
polyline: [{
points: pl,
color: '#FF0000DD'.width: 4}]})},fail: function (error) {
console.log(error);
},
complete: function (res) {
console.log(res); }}); }})Copy the codeThe view code
<! -- Map container --><map
id="myMap"
style="width: 100%; height: 300px;"
longitude="{{longitude}}" latitude="{{latitude}}"
scale='16'
polyline="{{polyline}}"
show-location
>
</map>
<form bindsubmit="formSubmit">
<! -- Enter the latitude and longitude coordinates of the starting point and destination in string format -->
<! -- Start input box, same end, do not fill the default current position -->
<label>Starting point coordinates:<input style="border:1px solid #000;" name="start"></input></label>
<! -- Terminal input box, for example: 39.984060,116.307520-->
<label>Terminal coordinates:<input style="border:1px solid #000;" name="dest"></input></label>
<! Submit form data -->
<button form-type="submit">Route planning</button>
</form>
Copy the codeOpen personalized Tencent map
Wechat scan code binding, wechat will determine whether the current small program is registered with Tencent Location service, if the prompt is not registered, then you can enter the registered account, usually a mobile phone number to log in, to complete the binding of small program and Tencent location service account.
Some plug-ins require an additional AppID
Original text author: small 5 chat original text link: blog.csdn.net/lmy_520/art…