Intelligent awareness of Baidu map API

Lishui Automobile Transportation Group Co., Ltd. Information Center min Anting

To do something better, you must first sharpen your skills. A developer's development tool can often help us get twice the result with half the effort. Even Sun Wukong's great skill has paid a lot of effort to find a perfect place. In the face of the unique rules of the day, Google is also declining, and the local Baidu map is more and more widely used, so the application development of Baidu map is becoming more and more important. Currently, development tools are becoming more user-friendly, and the "smart sensing" function is especially convenient. After we enter a variable or enter a decimal point after the variable, the available attributes will be automatically prompted, this not only greatly improves development efficiency and reduces memory, but also avoids writing errors, as shown in C # SMART awareness:

Without this kind of intelligent perception, all input variables, attributes, and events by memory is incredible now, although we did this in the DOS era.

The parameter p_TextBox in the figure is of the TextBox type. Therefore, it is not surprising that the integrated development environment (IDE) can infer the automatically prompted content of this parameter for intelligent sensing. We use many Baidu APIs as JavaScript interfaces. As we all know, JavaScript is a weak type language. When it is used as a parameter or variable, IDE cannot know what information is prompted, only some general attributes can be prompted, which is extremely unfavorable for our development. For this reason, I fully utilize the Microsoft Visual Studio function, I made a prompt document based on the Baidu technical document for VS. In fact, the Baidu map we use is a simple HTML file, it has nothing to do with what development tools are used for secondary development. I chose VS to use the powerful editing function provided by VS itself. Let's first look at the direct development without using the prompt document, smart sensing effect:

The prompt in has almost no significance for our development. The smart sensing effect after the prompt document is used:

In, almost all methods, events, and attributes of map are automatically prompted. After selecting a prompt entry, there are also specific Chinese instructions. Is it much more convenient? If you are interested in this, try the following steps.

1. Create a common blank website

We need to first create a website project, display the Baidu map normally, and then start to use the smart sensing function to write code. It is very easy to use VS to create a website. If you used other IDE, follow the steps below to get started easily.

1. Create a blank website

Open VS2010 and create a blank website, such:

2. Create a map carrier webpage

To load Baidu maps, you need to add an html file on the project (not the solution, yes"E: \... \ WebSite1") Right-click and select" Add new item "from the pop-up menu to create an html file:

After an html file is added, the file is used as the website start page for debugging. Right-click the newly added html file and select "set as start page" from the pop-up menu ":

3. Create a script file

Create a new script file for coding. For this reason, add a js file by referring to the method of adding an html file:

4. add reference to the script file

Link the newly added js file to the webpage. You can either write the file directly on the webpage or hold down the js file in the project and drag it to the <title> node of the html file, it is recommended that the latter be used for convenience. The HTML file after the Link contains the following content:

5. Create a map container div

Add a div to the body node to load the map. Set the id to mapdiv:

6. Set the div Style

I like to write css and js into a single file, which is clear and can reduce the amount of data such as page return. Here I use this habit to create a new css file and link it in:

We recommend that you drag the link to the CSS file, open the css file, and add the style to it:

 

,,

{

:;

:;

:;

:;

}

7. Add Baidu map interface reference

Note: Use your own key instead of the following:

YouKey"Of course, you can also use the callback function to implement asynchronous loading. This is a specific development scope and will not be described here.

It should be emphasized that:This reference must be in front of our own js File, The effect is as follows:

Baidu map smart sensing

Again, the reference to Baidu API should be in front of baiduMap. js. The order is very important!

8. Load Baidu Map

Open the baiduMap. js file, write the js Code, and load the map:

Window. onload = ()

{

Map = BMap. Map ();

Map. centerAndZoom (BMap. Point (119.90478515625, 28.4759344262724), 10 );

};

So far, the development of a standard website project has been completed. After we run the website, we can see that Baidu map is loaded normally.

Ii. Smart sensing

After completing the website preparation, we began to write a program and open the js file. Let's see the original system prompts:

Although we know that the map variable has a large number of methods, events, and attributes, but VS does not know this, of course, it will not be able to perceive intelligently, and only prompts a few meaningless options, if the development is like this, the subsequent workload will be quite large. Next, we will start to get into the topic to implement SMART awareness.

1. Add documents required for smart sensing

Download the smart sensing document (download prompt document). After decompression, we really need two files: mapAttach. js and mapPromptDoc. js. Add these two files to the project:

2. Add mapAttach. js reference

Link mapAttach. js to the html file. Note,This file must be prefixed by Baidu link reference:

Baidu map smart sensing

 

3. add reference to the prompt document

Open baiduMap. js, add a reference to the prompt document, and press and hold mapPromptDoc. upload the js file to baiduMap. the reference is automatically created on js. Note that this prompt document is only for VS and cannot be added to html:

 

Window. onload = ()

{

Map = BMap. Map ();

Map. centerAndZoom (BMap. Point (119.90478515625, 28.4759344262724), 10 );

};

 

From the code above, we can see that the reference statement for this file is essentially commented out, that is, it will not really run, just tell VS2010 to extract the prompt information from here.

4. Update prompt information

Make sure that the current editing window is baiduMap. js. Open menu editing → intelliisence → update JScript intelliisence, or press the shortcut key Ctrl + Shift + J:

Now, let's test again. After Entering map and the decimal point, the prompt is changed:

We can see that after entering the variable name and decimal point, We will automatically prompt various methods and attributes of the Baidu map control. After selecting a method, there will be a Chinese explanation. Is it much more convenient?

3. Other skills

1. Global Variables

For ease of use, we often need to set some global variables, while VS's intelligent perception determines the type based on the value assignment. Therefore, global variables must be assigned values when being defined, if Baidu map is not loaded yet, an error is inevitable when assigning values. To solve this problem, I made an additional js file, which is the previous mapAttach. js, which defines common functions of Baidu map. After the Baidu map interface is loaded, it will be automatically overwritten. This is why I emphasize mapAttach. js must be referenced in front of the Baidu interface. By doing so, we can assign a value to the global variable. Even for the purpose of smart sensing, no error will be reported:

Map = BMap. Map ();

Window. onload = ()

{

Map = BMap. Map ();

Map. centerAndZoom (BMap. Point (119.90478515625, 28.4759344262724), 10 );

};

 

Before using this variable, you must assign a value.

2. Add events

Baidu map has many events. The standard format is:

 

Map. addEventListener (, (type)

{

});

The above method adds a click event to Baidu map, but the event name is a string, which depends on rote memorization. To solve this problem, I am in mapAttach. the event names are listed in js and can be used directly, for example:

Map. addEventListener (BMapEventName. click, (type)

{

});

Of course, the listed event names also support smart sensing:

The event names used by other controls are also available. If you are interested, you can look at the mapAttach. js source file.

Iv. Conclusion

The reference sequence in the html file cannot be wrong. mapAttach. js, Baidu interface, and your own js file are in sequence. mapPromptDoc. js is for IDE and must not be referenced on the page.

The above are my own things for Development convenience and laziness. Due to the limited technical level and tight time, there must be a lot of imperfections or even errors. Sorry, you can also create two js files and complete them on your own. Of course, it would be great if Baidu officially provided a prompt document: authoritative and comprehensive. Let's look forward to it together !!!