Vue integrated Tencent map basic API Demo collection (basic map introduction and display module, address inverse analysis, 3D/2D switching, location service, Mark)

Writing background

Most of the demo on the official website are native JS, relatively basic, and many advanced APIS are scattered. In order to facilitate the search of developers, we use VUE combined with the open source framework vue-admin to refer to the official website demo and make an out-of-the-box demo collection. (There will be a login screen for the project under Down, just enter 6 characters.)

Project preview

You can learn fromThis addressJust pull the code and copy and paste it.

Project description

As the author is in a hurry, only four modules are sorted out at present, respectively (if the effect is good, we will continue to update, welcome to mention issues, we will solve it in time when we see it) :

  1. Basic map introduction and display module
  2. 3D/2D switching and effect comparison
  3. The basic apis for location services are: Locate the current location, locate the initial location, locate the center point, add mouse click events, and toggle hide and show map text
  4. The basic use of mark is: add mark, end add mark event, mark mark can be dragged.

Preparatory work

Click this link to register Tencent Map developer account

Pay attention to the point

This is a Vue integrated Tencent map demo project needs to introduce the following content in index.html in advance

< script SRC = "https://map.qq.com/api/gljs?v=1.exp&key= after you register to obtain the key value" > < / 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= after you register for the key value" > < / script >Copy the code

Then write these lines in the main.js file

Vue. Prototype. $Map window. = TMap Vue. Prototype. $Location = new Windows. Qq. Maps. Geolocation (' your own key ', 'tencent Map template - blog)Copy the code

Book to here, most road friends should be directly copy and paste can be perfect to run Tencent map.

Update: How do I join the location inverse resolution service

To invoke this service, you must have a developer account and apply for your own key. Click this link to register a Tencent Map developer account and obtain the key. Call the get method:

{ rul:'http://localhost:9528/qq/ws/geocoder/v1/? Location = lat, lng&key = your key&get _poi = 1} 'Copy the code

There are several caveats to positional inverse parsing:

  1. Cross domain

Don’t know if it is only in this way, in the local startup project called when the inverse resolution address will offer cross-domain problem, need you in the program configured cross-domain code is as follows In vue. Config. Js configuration in cross domain (if is a friend of cli low version, trouble to search solution, has been relatively robust, I would not be in here, here)

DevServer: {port: port, open: true, overlay: {warnings: false, errors: true}, proxy: {// overlay: {port: port, open: true, overlay: {warnings: false, errors: true}, proxy: {// configure cross-domain '/qq': {target: 'https://apis.map.qq.com/', // here the background address is simulated; // Allow cross-domain pathRewrite: {'^/qq': "// Request when using this API can}}},Copy the code
  1. Authorization error

The error types are as follows

{"status": 110, "message": "request from unauthorized source: localhost9528"}Copy the code
{"status": 112, "message": "IP is not authorized, current IP: 127.0.0.1"}Copy the code
{"status": 111, "message": "signature verification failed"}Copy the code

The solution is to configure key management through Tencent location service platform combined with official documents, as shown in the figureFor details about API parameters, seeThe official documentation

The original author: we have to stand the original links: blog.csdn.net/xiaoyaolunt…