Shulou(Shulou.com)06/01 Report--

This article mainly explains how WeChat Mini Programs can display his location on the map. Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how WeChat Mini Programs can show his location on the map.

Screenshot

Index.wxml

{{location}}

The content is very simple, there is a map object and a text object on the screen.

Where the map object specifies longitude,latitude and markers, respectively. I'm sure you remember that the parts surrounded by double curly braces {{}} are variables whose values are defined in the js file of the corresponding page.

Index.js

/ / index.js

/ / obtain an application instance

Const app = getApp ()

Page ({

Data: {/ / data definition

Longitude: 0, / / corresponding to longitude variable in wxml file

Latitude: 0, / / corresponding to latitude variable in wxml file

Location:',', / / corresponding to the location variable in wxml file

Markers: [{/ / corresponding markers variable in wxml file

Id: 0

Latitude: 0

Longitude: 0

Width: 50

Height: 50

}]

}

OnShow: function () {

Var that = this

Wx.getLocation ({

Type: 'gcj02', / / return can be used for wx. Latitude and longitude of openLocation

Success: function (res) {

Var latitude = res.latitude

Var longitude = res.longitude

Console.log (res)

Var location = latitude.toFixed (2) +','+ longitude.toFixed (2)

That.setData ({longitude: longitude

Latitude: latitude

Location: location

Markers: [{latitude: latitude

Longitude: longitude

}]

});

}

})

}

})

This code implements the life cycle function onShow, whose core is ws.getLocation, whose output is processed by the passed success:function. The content of processing is very simple, that is, it is set to each data through the setData function.

At this point, I believe you have a deeper understanding of "how WeChat Mini Programs can display his location on the map". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.