Write in front: the blogger is a real combat development after training into the cause of the “hill pig”, nickname from the cartoon “Lion King” in “Peng Peng”, always optimistic, positive attitude towards things around. My technical path from Java full stack engineer all the way to big data development, data mining field, now there are small achievements, I would like to share with you what I have learned in the past, I hope to help you on the way of learning. At the same time, the blogger also wants to build a perfect technical library through this attempt. Any anomalies, errors and matters needing attention related to the technical points of the article will be listed at the end, and everyone is welcome to provide materials in various ways.

  • Please criticize any mistakes in the article and revise them in time.
  • If you have any questions you would like to discuss or learn, please contact me at [email protected].
  • The style of the published article varies from column to column, and all are self-contained. Please correct the deficiencies.

Tencent Location – map building introduction (end with video)

Keywords: Tencent location, map, Web side, JavaScript API GL, using tutorial \

The article directories

I. Function introduction

Javascript API GL is a 3D map API based on WebGL technology, with more free vision and smoother interaction. Provides rich functional interface, including point, line, surface drawing, custom layer, personalized style and drawing, ranging tools, etc. Support up to one million level point, line, surface drawing, while maintaining high frame rate operation.

Key application

1. User login

Open the home page of Tencent Location Service:lbs.qq.com, click the login button in the upper right corner:

2. Verify information

Click the console, enter the developer information interface, complete the basic user information, complete the verification.

3. Apply for a key

Click left key with quota underThe key management:



Click on theCreating a new key, enter the name, description, and verification code of the Key, and wait for approval:



After the key is created, you can view the key information on the management page:

4. Configure keys

After the key application is approved, you can clickSet up theButtons change the name and description, and can select the enabled products, as well as restrict the invocation rules:



In addition, you can view the usage of each interface on the view Quota page:

Three, operation steps

1. Develop document entry

Slide to the top menuDevelopment of the document-> Select from the Web terminalJavaScript API:



Click on the leftintroductory:

Direct address: lbs.qq.com/webApi/java…

2. Introduction to map basics

To build a basic map, use the following code in the documentation:

<! DOCTYPEhtml>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hello world!</title>
    <style type="text/css">
    #container{
        /* Map (container) display size */
        width:1200px;
        height:400px;
    }
    </style>
    <! -- Introduce Javascript API GL, need to replace own key-->
    <script src="Https://map.qq.com/api/gljs?v=1.exp&key= replace for their key"></script>
    <script>
        // Map initialization function, in this case called init, developers can define according to the actual situation
        function initMap() {
            // Define the map center coordinates
            var center = new TMap.LatLng(39.984120.116.307484)
            // Define the map variable and call the tmap.map () constructor to create the map
            var map = new TMap.Map(document.getElementById('container'), {
                center: center,// Set the map center coordinates
                zoom: 17.2.// Set the map zoom level
                pitch: 43.5.// Set the pitch Angle
                rotation: 45    // Set the map rotation Angle
            });
        }
    </script>
</head>
<! After the page is loaded, call initMap.
<body onload="initMap()">
    <! Define map display container -->
    <div id="container"></div>
</body>
</html>
Copy the code

Render as follows:



The result is an operational map component that can be dragged, rotated, zoomed, and so on. When testing locally, do not use the browser to open the HTML file directlyHBuilderTools, accessed as a service, or can be usedTomcat,NginxAnd other tools released.

3. Query the central point coordinates

When testing the map component, the coordinate picker can be used to directly query the coordinates of the corresponding position:



For example, shenzhen West Silicon Valley, the result is as follows (fill in the coordinates into the initialization code) :



Alternatively, coordinate data can be obtained directly through the address resolution interface, as described later in this article.

3. Complete case source code

  • Tencent location service case

4. Video direct

Video address: www.bilibili.com/video/BV1CK… , like the little partner must be three times to add attention oh ~

Tencent location – map building entry

Write at the end: the author tries to refine each knowledge point and use portal to mount links for related knowledge points. The article adopts the way of “text + picture + video” to show, which is squeezed time to make, hope to see here can leave a comment to like, slightly show support!