Preface
-
Recently, I found that many friends are asking how to use Baidu Maps on the intranet, or whether Baidu Maps can be used when the network is disconnected.
-
After some research later, the main difficulty is that under normal circumstances we need to access the public network Baidu pictures and data before we can use it.
-
If you cannot access Baidu map resources on the intranet, you will not be able to use them. If we can download the data we need locally and access it ourselves, then this problem can be solved.
-
We can use the map downloader to download the tile map data we need and run it using the server, so that it can be used on the intranet and off the Internet.
-
Unfortunately, it can only provide basic display and positioning. Baidu map api-class cannot be used, because Baidu map class and api are implemented through http requests
resource
Project Address: Baidu-Intranet: Using Baidu Maps in Intranet Environment - Use Cases - Precautions
Map resource downloader: project file utils/map-resource/compressed package - usage will be discussed below
Project tile map data: still under review
Suggestion: Don’t rush to change the code first - follow the steps and run the project first and take a look.
Implementation
1.public/static-file: equivalent to the static file after Baidu map compression-can be copied directly during migration
-
images: icons in the map, such as trees, buildings, etc.
-
modules: required js modules
-
bmap_offline_api_v3.0.min.js: Create a map, including APIs for various map operations, etc.
-
m4.png: Aggregation icon, the purple one in the picture above
-
map_load.js: Initialize some global variables, including file paths, tile image loading paths, dynamic loading of bmap_offline_api_v3.0.min.js files, etc.
-
MarkerClusterer_min.js: implement point aggregation
-
TextIconOverlay_min.js: Point aggregation related
2.public/index.html - is the final assembly file of the project - the above three package files need to be introduced - otherwise windows.BMap will report an error - you can copy it directly during migration
3. Use the project file utils/map-resource/compressed package to download the map tiles
1. Just decompress the compressed package. Open the decompressed folder and click imaps.exe to open the program. The software will open and create a default MapDownload folder on the C drive.
2. When you first enter, if you click on the city map on the left, the map on the right is not displayed. It may be because the Google Map selected by default cannot be loaded. Select the upper left corner - Map - select the map you need.
3. Follow the steps below to download the map
4. Use npm to globally download server and run these map resources.
1. You can download it after my csdn resource is passed, or you can directly download the Fujian Province (level 11-15) data by following the steps.
2. After downloading the data, win+r-open cmd-npm to install server globally.
npm install -g serve3. Go to the downloaded baidumaps folder - open the cmd window above and run the command - serve - see the port number - the operation is successful
5. Disconnect the desktop network and start testing
1. Take a desktop computer as an example. Disconnect the network at this time. It is an intranet and can only access itself, so try to write 127.0.0.1 and localhost for all addresses.
2. It should be, for example, 192.168.2.xx - this is the LAN IP issued to you by the router. It will not be used if you disconnect the network. Remember - it is very important.
6. Now run the project in the browser to see the effect
1. The same at this time, after disconnecting from the Internet, enter the address 127.0.0.1 or localhost in the browser
2. If you find that the map is displayed normally at this time, click on the center point of the map and the label will switch normally, which means that you have successfully used Baidu Map on the intranet.
3. If you find nothing, open the console and find the picture 404, check the code and map level, there are explanations below.
6.1 Looking closely at the console, we will find that in addition to image loading, when we use the mouse wheel to zoom, a request will be sent to Baidu Map. And reverse address analysis cannot resolve the location information without printing it.
1. This scroll wheel sends a request to Baidu Maps and reports an error, which does not affect its use.
2. Reverse geocoding is not available. We can understand that we only download the basic map tiles and longitude and latitude data locally, so there is no problem in using and displaying the basic functions, but the api, class, and reverse geocoding need to send http requests. Asking the data returned by Baidu server resource call, naturally it cannot be used.
6.3 Verify this issue
1. Step 5 - Restore the computer to the Internet, comment out the code in the screenshot of the second step (note to fill in your own AK), and refresh the project
2. At this time, we will find that the wheel sending interface no longer reports errors. When the mouse clicks on the map, an http request is sent, and the reverse address resolution data is also printed.
3. After all, we are using it on the intranet or offline. If we want to use other people’s things, we must provide them and use them according to the rules (there is no good solution yet)
Advantages and Disadvantages – Things to Know
1. We cannot access Baidu data resources when the intranet is offline. Therefore, this problem can only be solved by downloading the data resources and starting the service locally.
2. Can indeed meet basic needs
3. Map zoom in, zoom out, controls, positioning
4. To load the map there, we first need to download the map tiles, and then the map will be loaded wherever the center point of the map is located.
5. We need to control the magnification level of the map, because it must correspond to the downloaded tile image.
6. The best download level for tile images is 11-15, which just fills the entire screen. Any higher levels will cause downloading to be very slow.
7. During development, we use npm to download serve and run the map resources from the local machine (serve directly)
8. It is best to write 127.0.0.1 and localhost for all addresses to facilitate testing (because when you directly disconnect the network cable for testing later, you can only access yourself)
Tile image loading error -404 solved
1. Tile map is to divide a map area into pictures of equal size according to the magnification level for loading.
1. First determine whether the longitude and latitude of the center point of the map is consistent with the downloaded map tile image.
2. Is the tile map download level the same as the code map limit magnification level (for example, if the map is magnified to level 19, but there is no level 19 image in the downloaded map, an error will be reported)
3. After starting the local image resources with serve - check the map_load.js file (generally no need to change it by default)
4.. Copy the 404 image path to your local browser to see if it can be accessed
advantage
1. It is relatively easy to introduce the project - it can indeed be used under the internal network (when the external network cannot be accessed - offline)
shortcoming
1. When the mouse scrolls, Baidu's API will be called to report an error, but it will not affect the use.
2. Baidu api will fail, such as reverse address resolution, and no Baidu resource connection with identity is established (that is, Baidu map is not introduced normally in public/index-)
3. If you just look at the map display and positioning - it's OK, but it's not enough to use the API - no solution has been found yet.
Summarize:
After this process, I believe you will also have an initial deep impression on vue-intranet and offline use of Baidu maps (map tile images download static resources display positioning), but in actual development the situation we encountered is definitely not the same. It's the same, so we have to understand its principles and never deviate from its origins. Come on, hit the workers!
Please point out any deficiencies, thank you - Feng Guo Wuhen