This is the first day of my participation in the August Text Challenge.More challenges in August

Baidu map introduction

The baidu Map development kit introduced in index.html is as follows:

<! DOCTYPE HTML > < HTML >... <body> <div id="app"></div> <script type="text/javascript" SRC = "http://api.map.baidu.com/api?v=2.0&ak= open platform for baidu map API. The KEY" > < / script > < / body > < / HTML >Copy the code

If the console has a yellow warning

It is recommended to change the API to getScript

< script type = "text/javascript" SRC = "http://api.map.baidu.com/getscript?v=2.0&ak= open platform for baidu map API. The KEY" > < / script >Copy the code

Eslint then reports an error that the BMap is undefined, but the map loads in and works fine. Simply configure ESLint to recognize the global BMap variable in the same way that the CDN imports third-party packages:

1. Modify webpack.base.conf.js

Externals: {'vue': 'vue', 'vue-router': 'VueRouter',... 'BMap': 'window.BMap' },Copy the code

2. Modify the configuration file. Eslintrc.js

Globals: {'Vue': true, 'VueRouter': true... 'BMap': true }Copy the code

At this point, you can normally create a map div container, initialize the use of Baidu map, pay attention to the container height and width Settings, otherwise the map may not be displayed.

Center point and coordinate offset problems

The code Settings are as follows:

InitMap () {this.map = new map.map ('mapContent') let point = new map.point (113.331084, This.map. centerAndZoom(point, PNG ('/static/img/map/marker_' + state + '.png', '/ /static/img/map/ state + '.png', new BMap.Size(20, 30)) let label = new BMap.Label(slabel, {offset: New map. Size(20, -10)}) let marker = new map. marker (point, {icon: cIcon}) SetStyle ({border: 'none', background: '#409eff', color: 'white', padding: '2px 4px'}) marker.setLabel(label) /* eslint-disable */ // marker.setAnimation(BMAP_ANIMATION_BOUNCE) // Add mark animation - /* eslint-enable */ this.map.addoverlay (marker) // Add markers to maps},Copy the code

The symptoms are as follows:

Obviously the Canton Tower is not in the right place and the real Canton Tower is not in the center of the display.

After zooming in on the map, the marked position jumps to the correct position.

That means the coordinates are fine. There are two problems:

1. The center point of centerAndZoom is not in the center position

2. Deviation exists in the position of initialization annotation points

Problem by problem

1. The center point of centerAndZoom is not in the center position

A lot of people say div was hidden when you created the map, right? Height and width are 0, right?

< span style = “max-width: 100%; clear: both; min-height: 0;

Lost in thought…

So I print out the width of the DOM and I find

/* setTimeout(() => {this.initmap () // initMap}, 2000) */}, InitMap () {this.map = new map.map ('mapContent') // Create a map in baidu Map container console.log(document.getElementById('mapContent').offsetHeight, 111) let point = new bmap.point (113.331084,23.112223)...... },Copy the code

When the map is not initialized using setTimeout delay, the printed width is 1872px;

After using setTimeout delay map initialization, the printed width is 1644px;

The difference is 51px, although setTimeout delay loading can solve the problem, but the delay time is not controllable, and the root cause has not been found out.

Continue to brood…

Because the layout of the interface is the left menu, click the corresponding menu to enter the subroute embedded in Baidu Map. So change the width of the left menu…

<el-aside :width="'420px'"></el-aside>Copy the code

When the map is not initialized using setTimeout delay, the printed width is 1872px;

After using setTimeout delay map initialization, the printed width is 1444px;

In other words, when the map is initially loaded, its container gets the height and width of almost the entire screen…

If setTimeout is not used to delay map initialization:

When switching routes in the El-Aside menu, the width is printed 1444px and the center is normal;

When refreshing the route page of the current map, the width is 1872px and the center point is off.

At the same time, print the width of el-aside in three mounted order

<div class="main"> <el-aside :width="'220px'"></el-aside> <router-view/> </div> // console.log(document.getElementById('testaaa').offsetWidth, 'main') setTimeout(() => { console.log(document.getElementById('testaaa').offsetWidth, 'main') }, 1000) }, // Mounted () {console.log(document.getelementByid ('testaaa').offsetwidth, 'el-aside')}, // Mounted () {console.log(document.getelementbyid ('testaaa').offsetwidth, 'bidu-map ')},Copy the code

The console output is as follows:

  • 0 “el-aside”
  • 0 “baidu-map”
  • 0 “main”
  • 220 “main”

That is, when the map is loaded, the menu does not get its width, probably because the parent route waits until all the loading is complete before assigning the menu width.

Causes the map to load before the width of the el-aside menu, so the map container div does not subtract the width of the left menu div.

As for the solution, it is locked to delayed map loading, so try under map subroutes:

mounted () { console.log(document.getElementById('mapContent').offsetWidth, 'baidu-map') setTimeout(() => { console.log(document.getElementById('mapContent').offsetWidth, 'bidu-map ') this.initmap () // create and initialize map}, 0)},Copy the code

View the console print below

When you call setTimeout, you put the function parameters in the event queue. Wait until the main program runs, and then call. As a result, setTimeout functions even after 0s are successfully executed after the loading of the parent route is completed, which successfully solves the problem of center point deviation.

2. Deviation exists in the position of initialization annotation points

After the first problem is solved

!!!!!!!!! All initializing annotation points are in the correct position