What should I do if vue reports an error when moving the mouse into and out of Baidu map?

I recently encountered a problem in a development project using Vue. When using Baidu Maps, an error occurred when the mouse was moved in and out. The solution process is quite tortuous. Now I will share the complete solution.

First, let’s take a look at the specific manifestations of the problem.

In the Vue component, use the Baidu map plug-in (BaiduMapApi_Load) and draw multiple overlays (Overlay) on the map through JavaScript. When the mouse moves into the overlay, an error occurs in the injected mouse event. The error message reads "Cannot read property 'pixel' of undefined".

After checking the code, we found that the error code is:

var point = e.overlay.pixel,

That is to say, in this statement, e.overlay.pixel cannot be recognized.

Then I checked the relevant documents and source code, and found that e.overlay.pixel was not explained in detail in the official Baidu Map document, and it can only be speculated from the code implementation.

After many attempts, I found that only if the Overlay inherits the BMap.Overlay class, the DOM element of the current Overlay can be obtained through e.overlay._div. However, using e.overlay._div still cannot obtain the position information of the current Overlay, that is, the e.overlay.pixel value is undefined.

In this case, we need to solve the problem ourselves. After further investigation, we finally found that the problem lies in the interaction event between the map and Overlay.

The Baidu map plug-in (BaiduMapApi_Load) we use is different from the messaging method implemented by the official map API. In our plug-in, the relevant information of the Overlay in the map is output through the Vue Bus event. However, this will affect the bridging relationship between e.overlay and BMap, leading to the previous problem.

To solve this problem, we need to improve the messaging. The specific method is as follows:

1. When the Overlay is loaded, call the $emit method of the Vue component to send the Overlay information in the form of an event;
2. Listen to the event in the map component and send it Overlay is stored in an array in the Vue instance;
3. In the mouse move event, use Vue Bus again to send the ID of the Overlay;
4. In statements that require the use of Overlay position information, Get the corresponding Overlay from the array, and obtain the corresponding longitude and latitude through the getProjection method of the BMap.Overlay prototype;
5. Finally, use the pointToPixel method of the BMap.Map class to convert the obtained longitude and latitude into coordinates on the map, Then store it in e.overlay.pixel.

At this point, the problem has been perfectly solved.

To summarize, the root cause of this problem lies in the order of message delivery. When developing with Vue, we need to pay special attention to the distribution and listening order of events to avoid such problems. In addition, when using the Baidu map plug-in, it is recommended to use the official API messaging method, otherwise similar problems may easily occur.

The above is the detailed content of What should I do if vue reports an error when moving the mouse into and out of Baidu map?. For more information, please follow other related articles on the PHP Chinese website!