The recent big data visualization needs to be done by switching the city. The map is updated according to the city. It is reasonable to update the latitude and longitude of the center point of Baidu map center, but the center is directly assigned after switching the city. The map is not updated, possibly because the map rendering is slow Question, I think it should be possible to assign values after rendering, so I thought of assigning a value to the center through $ nextTick
this.$nextTick(() => {
this.center = this.$store.state.city.location;
});
The result of this method is that it will not be updated immediately, but when the page is re-saved, such as tapping with a space, etc., that is, it will be updated when the dom is updated again, I feel a bit strange, so I checked it online. The official said
nextTick: Delay the callback to be executed after the next DOM update cycle. Actually take Chengdu Big Data Visualization Center as an example. The default is Chengdu. For example, if you switch to Changsha City, the map is still Chengdu. Switch the city to Shijiazhuang again. The city of Changsha will always slow down one step, this is the problem of the time for him to execute the callback
Finally, I replaced it with setTimeout. Assign a new value to the center of the map, and the map will be updated immediately:
this.timeout = setTimeout(() => {
this.center = this.$store.state.city.location;
}, 300);
setTimeout: Delay the callback to be executed after the specified time
The preconditions for the execution of callbacks for nextTick and setTimeout are not the same
