Using JavaScript and Tencent Maps to implement map circular drawing function

Using JavaScript and Tencent Maps to realize the map circular drawing function

With the popularity of the Internet and mobile devices, map applications have become indispensable in people's daily lives part. The circular drawing function of maps is common in various application scenarios, such as marking points of interest in different ranges, measuring distances, etc. This article will introduce how to use JavaScript and Tencent Maps to implement the map circular drawing function, and give specific code examples.

First of all, we need to introduce the JavaScript API of Tencent Maps, which can be introduced in the HTML page through the following code:

<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

Among them, YOUR_KEY needs to be replaced by your Tencent Maps The API key applied for the open platform can be obtained through [Tencent Map Open Platform] (https://lbs.qq.com/).

Next, we need to create a container on the page to display the map. You can use the following code to create a div container with a fixed size:

<div id="map" style="width: 800px; height: 600px;"></div>

Then, in JavaScript we can use Tencent Map API to create maps and draw circles. First, we need to initialize the map object and set the center point and zoom level of the map:

var map = new qq.maps.Map(document.getElementById("map"), {
  center: new qq.maps.LatLng(39.916527, 116.397128), // 地图中心点坐标，这里以北京为例
  zoom: 12 // 地图缩放级别
});

Next, we can create a circular overlay and set its center coordinates, radius and style:

var circle = new qq.maps.Circle({
  center: new qq.maps.LatLng(39.916527, 116.397128), // 圆心坐标，同地图中心点
  radius: 1000, // 圆半径，单位为米
  strokeColor: "#FF0000", // 圆边框颜色
  strokeWeight: 2, // 圆边框线宽度
  fillColor: "#FF0000", // 圆填充颜色
  fillOpacity: 0.3 // 圆填充透明度
});

Finally, we add the circle to the map:

circle.setMap(map);

In this way, a red circle with a radius of 1000 meters will be displayed on the map. You can adjust the circle center coordinates, radius and style according to actual needs.

The complete code example is as follows:

  
    
    
    <script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
    
  
  
    

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

      var circle = new qq.maps.Circle({
        center: new qq.maps.LatLng(39.916527, 116.397128),
        radius: 1000,
        strokeColor: "#FF0000",
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.3
      });

      circle.setMap(map);
    </script>
  

Through the above code example, we can draw a circle on Tencent Map, and adjust the center coordinates, radius and style according to actual needs. In this way, we can flexibly use the map circle drawing function in map applications.

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