Tip: After the article is written, the table of contents can be automatically generated. For how to generate it, please refer to the help document on the right.
Secondary development of Baidu map based on JavaScript Hello World
Preface
Teach you step by step the simplest Web GIS development based on Baidu Map API
Lesson 1
This article is a detailed explanation based on the developer documentation of Baidu Map Open Platform. Students with 0 basic knowledge need to combine this article with the developer documentation of Baidu Map Open Platform. Watch it together, don’t be lazy! !
1. Preparation
Material preparation: a computer with Internet access, computer software and notepad
1. Apply for a key
LoginBaidu Map Open Platform.
Click on Development Document - JavaScript API< a i=4> Read the first article of the developer documentation - Complete the operation of obtaining the key
The picture below shows the key obtained by the author
2. Usage steps
1. Program Yuan’s favorite Ctrl C and Ctrl V
Copy all the code in the orange box into Notepad
2. Replace the key
Replace the AK (key) of your application number
3.Save file as
Save as Select all files and set the file name to sss.htm
4. Done!
Find the file you just saved on the desktop, double-click it and select Open as browser
This will create a web page for full map browsing
3. Specific explanation
1. Relevant parameter settings used in this example
var point = new BMapGL.Point(longitude, latitude);
specifically means to set the coordinates of a point object. In this example, it is set to the longitude and latitude of Tiananmen Square.
(If you need to find the latitude and longitude, please click here)
map.centerAndZoom(point, 15);
Set the point instantiated in the previous sentence of code as the center point coordinates of the map, and set the map level. The larger the second parameter, the larger the map scale and the more detailed the displayed content.
2. Other parameters:
map.setMapStyleV2({styleId: ‘Style ID’});
The style needs to be set inPersonalized Map after editing, publishing, and obtaining the ID number
Specific operation referencePersonalized map usage guide
After setting the map personalization, the webpage effect is as follows
Isn’t it very refreshing~
There are many personalized templates waiting for you to choose< /span>
Summarize
The developer documentation of Baidu Map is always a bit confusing for novices with a basic knowledge of 0000000. For example, they don’t know how to compile the code, whether learning JavaScript requires downloading a special compiler, etc. This article tells you in a concise and concise way that Notepad can complete this function!
Time has allowed me to grow from a little rookie to a big one.