Vue integrates basic API Demo set of Tencent map (basic map introduction and display module, inverse address resolution, 3D/2D switching, location service, mark mark)

Writing background

Most of the official website demo is native JS, more basic, a lot of advanced API distribution is relatively scattered, in order to facilitate developers to find, use Vue combined with the online open source framework vue-admin reference to the official website demo, do a demo set out of the box. There will be a login screen for the next project, just enter any 6 characters.

Project preview

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

Project description

Because the author has a short time, so far only four modules have been sorted out. (If the effect is good, we will continue to update them. If you see the issues, we will solve them in time) :

  1. Basic map introduction and display module
  2. 3D/2D switching versus effects
  3. Some of the basic APIs for location services are: locate current location, locate to initialization location, locate center point, add mouse-click events, and toggle between hiding and showing map text
  4. The basic use of the Mark tag, in order: add a mark, end add a mark event, Mark mark point can be dragged.

Preparatory work

Click this link to sign up for Tencent Map Developer Account

Pay attention to the point

This is a Vue integrated Tencent map demo project needs to be introduced in the index. HTML in advance of the following content

< 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 >

Then write these lines of code 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)

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

Update: How do I join the inverse location resolution service

To call this service, you must have a developer account and apply for your own key. Click this link to register the Tencent map developer account and get the key. Specific use method: call through get method:

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

There are several caveats to inverse position resolution:

  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: {// configure cross-domain '/ QQ ': {target: 'https://apis.map.qq.com/', // where the background address is simulated; // Allow cross-domain pathRewrite: {'^/ QQ ': "// Use this API on request}}},
  1. Authorized error reporting type is as follows
{"status": 110, "message": "request source is not authorized, this request source domain: localhost9528"}
{"status": 112, "message": "IP is not authorized, current IP: 127.0.0.1"}
{"status": 111, "message": "signature verification failed"}

The solution is through Tencent location service platform, combined with the official document configuration key management, as shown in the figure

Please refer to the detailed API parametersThe official documentation

We have to stand.
https://blog.csdn.net/xiaoyao…