How can WeChat Mini Programs show his location on the map?
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!
