Using JavaScript and Tencent Maps to implement map hotspot marking function-JS Tutorial-php.cn

Using JavaScript and Tencent Maps to implement map hotspot marking function

WBOY

Release： 2023-11-21 10:08:44

Original

740 people have browsed it

Using JavaScript and Tencent Maps to implement map hotspot marking function

Use JavaScript and Tencent Maps to implement map hotspot marking function

Tencent Maps is one of the commonly used map service platforms in China, with rich map data and powerful development tools , which can provide map display and location services for web pages and mobile applications. In modern web development, we often need to mark specific hot spots on the map so that users can quickly understand and locate them. This article will introduce how to use JavaScript and Tencent Map API to implement the map hotspot marking function.

First, we need to introduce Tencent Map’s JavaScript API and related CSS files. Add the following code in the tag of the HTML file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Using JavaScript and Tencent Maps to implement map hotspot marking function</title>
    <style type="text/css">
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
<script>
    // 程序逻辑将在这里编写
</script>
</body>
</html>

Copy after login

In the above code, we use YOUR_KEY to represent the API key of Tencent Maps . In actual use, we need to apply for an API key from Tencent Map Open Platform and replace YOUR_KEY in the code.

Next, we can write JavaScript code in the <script> tag to implement the map hotspot marking function. We first simply build a map and set the center point and zoom level:

var map = new qq.maps.Map(document.getElementById("map"), {
    center: new qq.maps.LatLng(39.916527, 116.397128),
    zoom: 13
});

Copy after login

In the above code, we create a qq.maps.Map instance and pass in an instance with ## The <div> element with #id="map" serves as the map container. Next, the center point and zoom level of the map are specified. The latitude and longitude here represents the location of Beijing.

Now, we can start adding hotspot markers to the map. Suppose we have a set of geographical data, each data contains longitude, latitude and name. We can use a loop to iterate through this data and create marker objects and add them to the map:

var locations =[{
    name: "地点1",
    lat: 39.916527,
    lng: 116.397128
}, {
    name: "地点2",
    lat: 39.908694,
    lng: 116.397143
}, {
    name: "地点3",
    lat: 39.905168,
    lng: 116.391047
}];

// 遍历数据
for (var i = 0; i < locations.length; i++) {
    var location = locations[i];
    var marker = new qq.maps.Marker({
        position: new qq.maps.LatLng(location.lat, location.lng),
        map: map,
        title: location.name
    });
}

Copy after login

In the above code, we first create an array

locations that contains the location data. Next, by looping through, we create the qq.maps.Marker object and specify the marker's location, map instance, and title. Finally, add the marker object to the map.

After completing the above steps, the hotspot markers on the map will be displayed. When the mouse passes over the mark, a prompt box with the name will pop up. Based on actual needs, we can also add more styles and event handling logic to the markup.

To sum up, it is very simple to use JavaScript and Tencent Map API to implement the map hotspot marking function. We simply create the map instance, set the center point and zoom level, then loop through creating the marker object and adding it to the map. Through this method, we can easily implement the map hotspot marking function in web pages to improve user experience and interactivity.

The above is the detailed content of Using JavaScript and Tencent Maps to implement map hotspot marking function. For more information, please follow other related articles on the PHP Chinese website!