Vue integrates Tencent Map to implement API (with DEMO)

Writing Background

.The previous project used Tencent Maps, which felt quite useful, but most of the official demos were native js and relatively basic, and many advanced APIs were scattered, making it difficult for developers to find them. So I used Vue combined with the online open source framework Vue-admin to imitate the official one and make a ready-to-use Demo collection. When you download the project, there will be a login interface. Just enter six characters (I am too lazy to remove it, it is too late)

Project Preview

You can directly pull the code from this address and copy and paste it.

Project Description

Due to the author's limited time, only four modules have been sorted out so far (if the effect is good, I will continue to update, welcome all Taoist friends to raise issues, and I will solve them in time when I see them):

• Basic map introduction and display module
• 3D/2D switching and effect comparison
• Some basic APIs about location services are: locate the current location, locate the initial location, locate the center point, add mouse click events, switch between hiding and showing map text
• The basic usage of mark is: add mark, end the add mark event, and make the mark point draggable.

Preliminary preparations

Click this link to register a Tencent Maps developer account

Note

This is a demo of Vue integrating Tencent Maps
The following content needs to be introduced in the index.html in the project

 <script src="https://map.qq.com/api/gljs?v=1.exp&key=The key value you get after registration"></script>
 <script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
 <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=The key value you get after registration"></script>

Then write these lines of code in the main.js file

Vue.prototype.$Map = window.TMap
Vue.prototype.$Location = new window.qq.maps.Geolocation('your own key', 'Tencent Map Template - Blog Display')

Once again, please be reminded that you can click this link to register a Tencent Map developer account.

At this point in the book, most of you should be able to run Tencent Maps perfectly by simply copying and pasting.

The following is the update for January 16, 2021

To call this service, you must have a developer account and apply for your own key. Here is the application address and specific usage instructions:
Called by get method:

{
rul:'http://localhost:9528/qq/ws/geocoder/v1/?location=lat,lng&key=your key&get_poi=1'}

There are several pitfalls in position inverse analysis, which are listed here:

The first big pitfall is cross-domain. I don't know if I am the only one who has this problem. When calling the reverse resolution address when starting the project locally, a cross-domain problem will be reported. You need to configure the cross-domain code in the program as follows: Configure cross-domain in vue.config.js (If you are a friend with a low version of cli, please search for solutions online by yourself. It is already quite complete, so I won't go into details here)

devServer: {
    port: port,
    open: true,
    overlay:
      warnings: false,
      errors: true
    },
    proxy: { //Configure cross-domain '/qq': {
        target: 'https://apis.map.qq.com/', // The background address here is simulated; you should fill in your real background interface ws: true,
        changOrigin: true, // Allow cross-domain pathRewrite: {
          '^/qq': '' // Use this api when requesting}}
    },

The second big pit authorization error reporting type is as follows

 	{
    "status": 110,
    "message": "The request source is not authorized, the request source domain name: localhost9528"
	}

 	{
    "status": 112,
    "message": "IP is not authorized, current IP: 127.0.0.1"
	}

 {
    "status": 111,
    "message": "Signature verification failed"
  }

The solution is to use Tencent location service platform and configure key management in combination with official documents, as shown in the figure

For detailed API parameters, please refer to the official documentation.

This is the end of this article about Vue integration of Tencent Maps to implement API (with DEMO). For more relevant Vue integration of Tencent Maps content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!