Home > Article > Backend Development > Create custom bubbles for the map using PHP and Amap API
Create custom bubbles for the map using PHP and Amap API
- PHPzOriginal
- 2023-08-01 08:39:211354browse
Use PHP and Amap API to create custom bubbles of the map
With the development of the Internet, map applications have become more and more important in our daily lives. In many websites and applications, we often see maps with some useful information marked on them, such as store locations, traffic conditions, etc. This article will introduce how to use PHP and Amap API to create custom bubbles (also called markers).
First, we need to register on the Amap Developer Platform and obtain an API key. This key will be used for communication between our application and the Amap API.
Next, we have to prepare a basic HTML page, on which we will introduce PHP code to handle the generation and display of map markers.
<!DOCTYPE html>
<html>
<head>
<title>自定义气泡</title>
<style>
#map {
width: 100%;
height: 500px;
}
</style>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>
</head>
<body>
<h1>自定义气泡</h1>
<div id="map"></div>
<script>
// 初始化地图
var map = new AMap.Map('map', {
center: [116.397428, 39.90923],
zoom: 13
});
// 创建自定义标记
<?php
$locations = array(
array('lat' => 39.908823, 'lng' => 116.397470, 'name' => '标记1', 'description' => '这是一个自定义标记'),
array('lat' => 39.908834, 'lng' => 116.395456, 'name' => '标记2', 'description' => '这是另一个自定义标记')
);
foreach ($locations as $location) {
echo "var marker = new AMap.Marker({
position: new AMap.LngLat(" . $location['lng'] . "," . $location['lat'] . "),
title: '" . $location['name'] . "',
map: map
});";
echo "var infoWindow = new AMap.InfoWindow({
content: '<h3>" . $location['name'] . "</h3><p>" . $location['description'] . "</p>'
});";
echo "marker.on('click', function() {
infoWindow.open(map, marker.getPosition());
});";
}
?>
</script>
</body>
</html>In the above code, we first initialize a map object through the AMap.Map function and specify the center coordinates and zoom level of the map.
Then, we define an array $locations containing custom bubble information. Each element contains longitude, latitude, name, and description information.
Next, we use foreach to loop through the elements in the array and create an AMap.Marker object for each element. This object represents a map marker, which we display by setting the location, title, and map object. We also created an AMap.InfoWindow object to display the contents of the bubble window.
Finally, we attach a click event listener to each marker so that when the marker is clicked, the bubble window will open on the map.
Before using this code, please make sure to replace YOUR_API_KEY with the API key you obtained on the Amap Developer Platform.
Summary:
This article introduces how to create custom bubbles using PHP and Amap API. By using the AMap.Marker and AMap.InfoWindow classes provided by the Amap API, we can easily create custom markers on the map and display relevant information when the marker is clicked. . This provides great convenience for us to add interactive map functions to websites or applications and improves user experience.
The above is the detailed content of Create custom bubbles for the map using PHP and Amap API. For more information, please follow other related articles on the PHP Chinese website!