Method and system for realizing integration of view and Baidu map based on Vue framework
By integrating Baidu Map API in the Vue framework, the problems of map accuracy and personalized display in the view are solved, street-level map display and rich map functions are realized, and user experience and development efficiency are improved.
Patent Information
- Application Number
- CN202510338182.1
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-03-21
- Publication Date
- 2025-07-18
AI Technical Summary
It is difficult for the existing technology to achieve street-level map accuracy and personalized display in the view. Alibaba Cloud data visualization platform cannot provide street-level data. Bigemap stops free services and is cumbersome to convert. Baidu map development platform cannot integrate with the view.
By introducing Baidu Map API into the Vue framework, creating map instances, setting map center and zoom levels, personalizing map styles, adding overlays and enabling scroll wheel zoom, the integration of views and Baidu maps is achieved.
The map accuracy has been improved to the street level, providing personalized display, improving user experience, simplifying development processes, improving development efficiency, and meeting diverse needs.
Smart Images
Figure CN120336440A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of custom visual maps, and specifically to a method and system for integrating a view with Baidu Map based on the Vue framework. Background Art
[0002] During the R & D process, it is necessary to display some user units on the map of the view and accurately locate the units to the township and street levels according to requirements. To achieve this function, various methods of adding maps have been compared, including:
[0003] The Alibaba Cloud data visualization platform provides geoJson data of map information for the whole country, provinces, municipalities directly under the Central Government, and county-level cities, but it cannot obtain street and town-level data and cannot meet our requirements.
[0004] Bigemap can download the kml file corresponding to the township and convert it into geoJson data, but this platform has stopped providing free services and requires payment to use, and the conversion process is relatively cumbersome.
[0005] The Baidu Map development platform provides a personalized map editing platform. Developers can customize map styles, colors, layers, etc. according to requirements to generate a "dedicated map". The platform supports up to 51 map elements, and once edited, it can be configured and used on multiple terminals. In addition, Baidu Map provides map data accurate to the street level, which can meet our requirements.
[0006] However, how to integrate Baidu Map with the view is a problem that needs to be solved currently. Summary of the Invention
[0007] The technical task of the present invention is to provide a method and system for integrating a view with Baidu Map based on the Vue framework to effectively solve the requirements of map accuracy and personalized display, and provide a convenient map solution for various application scenarios.
[0008] The technical solution adopted by the present invention to solve its technical problems is:
[0009] A method for integrating a view with Baidu Map based on the Vue framework, the implementation of which includes the following steps:
[0010] 1) Introduce the Baidu Map API:
[0011] Introduce the Baidu Map API in the HTML page and obtain the API key, which is a credential for using the Baidu Map service;
[0012] 2) Create a map instance: Create a Baidu Map instance in the Vue component;
[0013] 3) Set the map center and zoom level;
[0014] 4) Personalize the map style:
[0015] The ways to set the map style include: setting the map style by adding a style ID; or downloading the JSON file of the map style and introducing it in the code to set the map style;
[0016] 5) Add overlays;
[0017] 6) Enable wheel zoom;
[0018] 7) Overlay addition:
[0019] Add the set overlay object to the map to achieve visual display.
[0020] This method cleverly utilizes the Baidu Map platform to achieve the goal of improving the map accuracy to the street and township levels during the view drawing process, effectively solving the problem of insufficient display accuracy of traditional maps; and provides rich map functions, bringing a more accurate, beautiful and convenient map experience to users.
[0021] Furthermore, create a Baidu Map instance in the Vue component, and set the length, width and basic configuration of the map container, etc.
[0022] Furthermore, for the setting of the map center and zoom level,
[0023] Use the map.centerAndZoom(new BMap.point(longitude, latitude), level) method to set the center point and zoom level of the map, and precisely control the map display range.
[0024] Furthermore, for setting the map style using the style ID: create and obtain the style ID through the personalized editing platform, and use map.setMapStyleV2({styleId: ID}) to set the map style;
[0025] Furthermore, for setting the map style using the style JSON file: download the map style JSON file and introduce it in the code, and use map.setMapStyleV2({styleJson: JSON file}) to set the map style.
[0026] Furthermore, for the addition of overlays, the specific implementation is as follows:
[0027] 5.1) Clear overlays: First, use map.clearOverlays() to clear all existing overlays on the map;
[0028] 5.2) Set longitude and latitude: Use new BMap.Point(longitude, latitude) to create the longitude and latitude points of the overlay.
[0029] 5.3) Set the icon: Use new BMap.Icon(require('icon path'), new BMap.Size(width, height)) to create an icon object and set the icon size.
[0030] 5.4) Add the overlay: Use map.addOverlay(overlay object) to add the overlay to the map.
[0031] Furthermore, enable the scroll wheel zoom.
[0032] Use map.enableScrollWheelZoom(true) to enable the mouse scroll wheel zoom function and improve the user experience.
[0033] The present invention also claims to protect a system for integrating views with Baidu Maps based on the Vue framework, including: introducing the Baidu Maps API module for introducing the Baidu Maps API in the HTML page and obtaining the API key; creating a map instance module for creating a Baidu Maps instance in the Vue component; a map center and zoom level setting module; a personalized map style setting module; an overlay addition operation module; a scroll wheel zoom setting module; an overlay addition module for adding the set overlay object to the map to achieve visual display.
[0034] This system specifically realizes the integration of views with Baidu Maps based on the Vue framework through the above method.
[0035] The present invention also claims to protect a device for integrating views with Baidu Maps based on the Vue framework, including: at least one memory and at least one processor;
[0036] The at least one memory is used to store machine-readable programs;
[0037] The at least one processor is used to call the machine-readable program to implement the above method.
[0038] The present invention also claims to protect a computer-readable medium, on which computer instructions are stored, and when the computer instructions are executed by a processor, the above method is implemented.
[0039] Compared with the prior art, a method and system for integrating views with Baidu Maps based on the Vue framework of the present invention have the following beneficial effects:
[0040] The technical solution provided by the present invention for integrating Baidu Map based on the Vue framework and implementing a custom visual map has its advantages mainly reflected in the following aspects:
[0041] (1) A simple and easy-to-understand development process.
[0042] (2) Simple code and easy to maintain: encapsulate the map function into an independent Vue component, which is convenient for reuse and maintenance.
[0043] (3) Meet diverse requirements.
[0044] (4) Improve the user experience: personalized map customization and data visualization functions enhance the readability and aesthetics of the map, thereby improving the user experience.
[0045] (5) Improve development efficiency: both the Vue framework and the Baidu Map API have mature development platforms and complete documentation support, enabling rapid development and integration of map applications.
[0046] The method provided by the present invention for implementing a custom visual map based on the Vue framework and the Baidu Map API has the advantages of a simple and easy-to-understand development process, simple code and easy to maintain, meeting diverse requirements, improving the user experience, and improving development efficiency; it can be applied to various scenarios that require map functions, bringing a more accurate, beautiful, and convenient map experience to users. Brief Description of the Drawings
[0047] Figure 1 It is a flowchart showing the method for integrating the view with Baidu Map based on the Vue framework provided by an embodiment of the present invention. Detailed Embodiment
[0048] The present invention will be further described below in conjunction with the drawings and specific embodiments.
[0049] An embodiment of the present invention provides a method for integrating the view with Baidu Map based on the Vue framework. The implementation of this method includes the following steps:
[0050] 1. Introduce the Baidu Map API:
[0051] Introduce the Baidu Map API in the HTML page and obtain the API key, which is a credential for using the Baidu Map service.
[0052] The code is as follows:
[0053] <script type＝"text javascript”src＝" api.map.baidu.com aip？v＝3.0&ak＝秘钥”>
[0054] < / script>
[0055] 2. Create a map instance:
[0056] Create a Baidu Map instance in the Vue component and set the length, width, and basic configuration of the map container, etc.
[0057] The code is as follows:
[0058] this.map = new BMap.Map(this.$refs.map)
[0059] 3. Set the map center and zoom level:
[0060] Use the map.centerAndZoom(new BMap.point(longitude, latitude), level) method to set the center point and zoom level of the map, and precisely control the map display range.
[0061] 4. Personalize the map style:
[0062] There are two ways to set the map style. One is to add a style ID, and the other is to download the JSON file of the map style and introduce it in the code.
[0063] The first way: Use the style ID: Create and obtain the style ID through the personalized editing platform, and use map.setMapStyleV2({styleId: ID}) to set the map style.
[0064] The second way: Use the style JSON file: Download the map style JSON file and introduce it in the code, and use map.setMapStyleV2({styleJson: JSON file}) to set the map style.
[0065] 5. Add overlays, and the specific implementation is as follows:
[0066] 5.1. Clear overlays: First, use map.clearOverlays() to clear all existing overlays on the map;
[0067] 5.2. Set longitude and latitude: Use new BMap.Point(longitude, latitude) to create the longitude and latitude points of the overlay;
[0068] 5.3. Set the icon: Use new BMap.Icon(require('icon path'), new BMap.Size(width, height)) to create an icon object and set the icon size;
[0069] 5.4. Add the overlay: Use map.addOverlay(overlay object) to add the overlay to the map.
[0070] 6. Enable zooming with the scroll wheel:
[0071] Enable the mouse wheel zoom function using map.enableScrollWheelZoom(true) to enhance the user experience.
[0072] 7. Overlay addition:
[0073] Add the set overlay object to the map to achieve visual display.
[0074] The Vue framework has the following advantages:
[0075] Lightweight framework: It only focuses on views and constructs a collection of views.
[0076] Two-way data binding: Vue's two-way data binding mechanism can synchronize view and model data in real time to achieve the linkage between the map and data.
[0077] Component-based development: Vue's component-based development mode can encapsulate map functions into independent components, facilitating reuse and maintenance.
[0078] Separation of view and data, making it more convenient to use data.
[0079] Virtual DOM: Vue's virtual DOM technology can optimize page rendering performance and improve the smoothness of map display.
[0080] Data asynchronous listening
[0081] Responsive design: Vue's responsive design can ensure that the map is well displayed on different devices, providing a consistent experience.
[0082] Baidu Map has the following advantages:
[0083] High maturity: As a leading map service provider in China, Baidu Map has a complete map data and service system, can provide map information accurate to the street level, and can meet our needs.
[0084] Personalized customization: Baidu Map provides a personalized map editing platform. Developers can customize map styles, colors, layers, etc. according to actual needs to create a unique map display effect.
[0085] Convenient development: Baidu Map provides complete development documents, API interfaces, and sample codes, facilitating developers to quickly integrate and develop map applications.
[0086] Rich map styles: The Baidu Map API provides a variety of map styles, including the default style, satellite map, night view map, etc., to meet the needs of different scenarios.
[0087] Rich in functions: The Baidu Map API provides a wealth of functions, including personalized map editing, data visualization, adding overlays, etc., which can meet diverse application scenarios.
[0088] Data visualization: Baidu Map supports data visualization functions for points, lines, and polygons, and can display data in graphical form on the map, visually presenting data distribution and trends.
[0089] Adding overlays: Developers can add overlays such as markers, polylines, polygons, etc., and add information such as text and pictures to the overlays to enrich the map content.
[0090] Event listening: Developers can listen to map events, such as clicks, drags, zooms, etc., and trigger corresponding operations based on the events.
[0091] Stable service: As a leading map service provider in China, Baidu Map has stable services and a perfect after-sales service system.
[0092] Baidu Map provides accurate map data, rich functions, and convenient development tools, which can help us quickly develop map applications with rich functions and beautiful interfaces.
[0093] By integrating Baidu Map into the Vue view, the following functions can be achieved:
[0094] 1. Precise display: Display the map precisely to the street level, facilitating users to view and locate.
[0095] 2. Personalized display: Customize the map style and color according to the application scenario and user needs to create a unique map interface.
[0096] 3. Data visualization: Display data in the form of points, lines, polygons, etc. on the map, visually presenting data distribution and trends.
[0097] 4. Interactive operations: Support users to perform operations such as map zooming, dragging, and marking to enhance the user experience.
[0098] This method of integrating the Vue-based view with Baidu Map effectively solves the requirements for map accuracy and personalized display, providing a convenient map solution for various application scenarios.
[0099] An embodiment of the present invention also provides a system for integrating views with Baidu Maps based on the Vue framework, including: introducing the Baidu Maps API module for introducing the Baidu Maps API in the HTML page and obtaining the API key; creating a map instance module for creating a Baidu Maps instance in the Vue component; a map center and zoom level setting module; a personalized map style setting module; an overlay addition operation module; a scroll wheel zoom setting module; an overlay addition module for adding the set overlay object to the map to achieve visual display.
[0100] This system specifically realizes the integration of views with Baidu Maps based on the Vue framework through the method of integrating views with Baidu Maps based on the Vue framework described in the above embodiments. The specific implementation is as follows:
[0101] 1. Introducing the Baidu Maps API module:
[0102] Introduce the Baidu Maps API in the HTML page and obtain the API key, which is a credential for using the Baidu Maps service.
[0103] 2. Creating a map instance module:
[0104] Create a Baidu Maps instance in the Vue component and set the length, width, and basic configuration of the map container, etc.
[0105] 3. Map center and zoom level setting module:
[0106] Use the map.centerAndZoom(new BMap.point(longitude, latitude), level) method to set the center point and zoom level of the map, and precisely control the map display range.
[0107] 4. Personalized map style setting module:
[0108] Set the map style, including two methods. One is by adding a style id, and the other is to download the json file of the map style and introduce it in the code.
[0109] The first method: Using the style ID: Create and obtain the style ID through the personalized editing platform, and use map.setMapStyleV2({styleId: ID}) to set the map style.
[0110] The second method: Using the style JSON file: Download the map style JSON file and introduce it in the code, and use map.setMapStyleV2({styleJson: JSON file}) to set the map style.
[0111] 5. Overlay addition operation module, the specific implementation is as follows:
[0112] 5.1. Clear Overlays: First, use map.clearOverlays() to clear all existing overlays on the map;
[0113] 5.2. Set Latitude and Longitude: Use new BMap.Point(longitude, latitude) to create the latitude and longitude points of the overlay;
[0114] 5.3. Set Icon: Use new BMap.Icon(require('icon path'), new BMap.Size(width, height)) to create an icon object and set the icon size;
[0115] 5.4. Add Overlay: Use map.addOverlay(overlay object) to add the overlay to the map.
[0116] 6. Scroll Wheel Zoom Setting Module Enable scroll wheel zoom:
[0117] Use map.enableScrollWheelZoom(true) to enable the mouse scroll wheel zoom function and improve the user experience.
[0118] 7. Overlay Addition Module:
[0119] Add the set overlay object to the map to achieve visual display.
[0120] An embodiment of the present invention also provides a device for integrating a view with Baidu Map based on the Vue framework, including: at least one memory and at least one processor;
[0121] The at least one memory is used to store machine-readable programs;
[0122] The at least one processor is used to call the machine-readable program to implement the method for integrating a view with Baidu Map based on the Vue framework described in the above embodiments.
[0123] An embodiment of the present invention also provides a computer-readable medium. Computer instructions are stored on the computer-readable medium, and when the computer instructions are executed by a processor, the method for integrating a view with Baidu Map based on the Vue framework described in the above embodiments is implemented. Specifically, a system or device equipped with a storage medium can be provided. Software program codes for implementing the functions of any one of the above embodiments are stored on the storage medium, and the computer (or CPU or MPU) of the system or device reads and executes the program codes stored in the storage medium.
[0124] In such a case, the program code read from the storage medium itself can implement the functions of any one of the above embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.
[0125] Examples of the storage medium for providing the program code include floppy disks, hard disks, magneto-optical disks, optical disks (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RAM, DVD-RW, DVD+RW), magnetic tapes, non-volatile memory cards, and ROMs. Optionally, the program code can be downloaded from a server computer via a communication network.
[0126] In addition, it should be clear that not only can the functions of any one of the above embodiments be implemented by executing the program code read by the computer, but also by causing an operating system or the like operating on the computer based on the instructions of the program code to complete part or all of the actual operations.
[0127] In addition, it can be understood that the program code read from the storage medium is written into the memory provided in the expansion board inserted into the computer or the memory provided in the expansion unit connected to the computer, and then based on the instructions of the program code, the CPU or the like installed on the expansion board or the expansion unit is caused to execute part or all of the actual operations, thereby implementing the functions of any one of the above embodiments.
[0128] The present invention has been described in detail above with reference to the accompanying drawings and preferred embodiments. However, the present invention is not limited to these disclosed embodiments. Based on the above-mentioned multiple embodiments, those skilled in the art can know that more embodiments of the present invention can be obtained by combining the code review means in the above different embodiments, and these embodiments are also within the protection scope of the present invention.
Claims
1. A method for integrating views with Baidu Maps based on the Vue framework, characterized in that, The implementation of this method includes the following steps: 1) Introduce the Baidu Map API: Introduce the Baidu Map API in the HTML page and obtain the API key, which is the credential for using the Baidu Map service; 2) Create a map instance: Create a Baidu Map instance in the Vue component; 3) Set the map center and zoom level; 4) Personalize the map style: The ways to set the map style include: setting the map style by adding a style ID; or downloading the JSON file of the map style and introducing it in the code to set the map style; 5) Add overlays; 6) Enable zooming with the mouse wheel; 7) Add overlays: Add the set overlay object to the map to achieve visual display.
2. A method for integrating a view with Baidu Map based on the Vue framework according to claim 1, characterized in that When creating a Baidu Map instance in the Vue component, set the length, width, and basic configuration of the map container.
3. A method for integrating a view with Baidu Map based on the Vue framework according to claim 1, characterized in that When setting the map center and zoom level, Use the map.centerAndZoom(new BMap.point(longitude, latitude), level) method to set the center point and zoom level of the map.
4. A method for integrating a view with Baidu Map based on the Vue framework according to claim 1, characterized in that When setting the map style using the style ID: Create and obtain the style ID through the personalized editing platform, and use map.setMapStyleV2({styleId: ID}) to set the map style.
5. A method for integrating a view with Baidu Map based on the Vue framework according to claim 1, characterized in that, When setting the map style using the style JSON file: Download the map style JSON file and introduce it in the code, and use map.setMapStyleV2({styleJson: JSON file}) to set the map style.
6. A method for integrating a view with Baidu Map based on the Vue framework according to claim 1, characterized in that When adding overlays, the specific implementation is as follows: 5.1) Clear overlays: First, use map.clearOverlays() to clear all existing overlays on the map; 5.2) Set longitude and latitude: Use new BMap.Point(longitude, latitude) to create the longitude and latitude points of the overlay; 5.3) Set the icon: Use new BMap.Icon(require('icon path'), new BMap.Size(width, height)) to create an icon object and set the icon size; 5.4) Add overlays: Use map.addOverlay(overlay object) to add the overlay to the map.
7. A method for integrating a view with Baidu Map based on the Vue framework according to claim 1, characterized in that, When enabling zooming with the mouse wheel, Use map.enableScrollWheelZoom(true) to enable the mouse wheel zoom function.
8. A system for integrating views with Baidu Maps based on the Vue framework, characterized in that, It includes: Introduce the Baidu Map API module, which is used to introduce the Baidu Map API in the HTML page and obtain the API key; Create a map instance module, which is used to create a Baidu Map instance in the Vue component; Map center and zoom level setting module; Personalized map style setting module: Add overlay operation module; Mouse wheel zoom setting module; Overlay addition module, which is used to add the set overlay object to the map to achieve visual display; This system specifically realizes the integration of the view and the Baidu Map based on the Vue framework through the method described in any one of claims 1 to 7.
9. A device for integrating views with Baidu Maps based on the Vue framework, characterized in that, It includes: At least one memory and at least one processor; The at least one memory for storing a machine-readable program; The at least one processor for invoking the machine-readable program to implement the method according to any one of claims 1 to 7.
10. A computer-readable medium, characterized in that, Computer instructions are stored on the computer-readable medium, and when the computer instructions are executed by a processor, the method according to any one of claims 1 to 7 is implemented.