Home > Article > Backend Development > Geographical positioning and map display using PHP and mini-programs
Geographical positioning and map display using PHP and mini-programs
- WBOYOriginal
- 2023-07-04 16:01:091248browse
Geographical location positioning and map display of PHP and mini-programs
Geographic location positioning and map display have become one of the necessary functions in modern technology. With the popularity of mobile devices, people's demand for positioning and map display is also increasing. During the development process, PHP and applets are two common technology choices. This article will introduce you to the implementation method of geographical location positioning and map display in PHP and mini programs, and attach corresponding code examples.
1. Geolocation positioning in PHP
In PHP, we can use the third-party geolocation service API to obtain the user's geolocation information. Among them, Google Maps API is the most commonly used one. The following is a simple PHP code example for obtaining the user's geographical location information:
<?php $ip = $_SERVER['REMOTE_ADDR']; $url = "http://ip-api.com/json/".$ip."?fields=lat,lon"; $response = file_get_contents($url); $data = json_decode($response, true); $latitude = $data['lat']; $longitude = $data['lon']; echo "Latitude: ".$latitude." "; echo "Longitude: ".$longitude." "; ?>
In the above code, we first determine the user's geographical location information by obtaining the user's IP address. Then, we call the API provided by ip-api.com to obtain the user's geographical location coordinates. Finally, we output the obtained longitude and latitude information through the echo statement.
2. Geographical location positioning and map display in the mini program
The mini program itself has the functions of geolocation positioning and map display. Developers who use WeChat mini programs can directly call the interface provided by WeChat to achieve geographical location positioning. The following is a simple applet code example for obtaining the user's geographical location information:
// app.js
App({
onLaunch: function () {
let that = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
let latitude = res.latitude;
let longitude = res.longitude;
console.log("Latitude: " + latitude);
console.log("Longitude: " + longitude);
}
});
}
})In the above code, we obtain it by calling the wx.getLocation interface provided by the applet The user's geographical location information. And use console.log to output the obtained longitude and latitude information.
3. Map display
In PHP and mini programs, we can also display geographical location information on the map by calling the API of the corresponding map. Taking Baidu Map as an example, the following is a simple PHP code example for displaying a map with geographical location information on a web page:
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_API_KEY"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<script>
var map = new BMap.Map("map");
var point = new BMap.Point(<?php echo $longitude; ?>, <?php echo $latitude; ?>);
map.centerAndZoom(point, 15);
map.addOverlay(new BMap.Marker(point));
</script>
</body>
</html> In the above code, we first introduced the API of Baidu Map and added it to the page Added a div element for displaying the map. Then, we use new BMap.Map to create a map instance, and use new BMap.Point to create a label point, and finally add the label point to the map.
Similarly, in the mini program, we can use the interface provided by WeChat to realize the map display of geographical location information. The following is a simple applet code example for displaying a map with geographical location information in the applet:
// map-page.js
Page({
onLoad: function () {
let that = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
let latitude = res.latitude;
let longitude = res.longitude;
that.setData({
markers: [{
id: 0,
latitude: latitude,
longitude: longitude,
title: 'Location',
iconPath: '/images/location.png',
width: 30,
height: 30
}],
latitude: latitude,
longitude: longitude
});
}
});
}
})In the above code, we call wx.getLocation## provided by the applet #Interface to obtain the user's geographical location information, and assign the obtained longitude and latitude information to the markers and latitude, longitude attributes. Then, when the page is rendered, the map of the geographical location information is displayed.
The above is the detailed content of Geographical positioning and map display using PHP and mini-programs. For more information, please follow other related articles on the PHP Chinese website!