"Baidu Map API"--the first local group purchase site Map Plugin

Original: "Baidu Map API"--the first local group purchase site Map Plugin

Summary:

This paper introduces a map plugin applied on Group purchase website, which is applicable to the popular group purchase website. With this map plugin, you can easily label your business location on a map without any programming skills.

Front Office Address

Http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/user.html

Background address

Http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/admin.html

---------------------------------------------------------------------------------------------------------

Group Purchase Site Map plug-in instructions for use:

Front Desk User Browse page:

1, first to put a DOM container in the page

For example:

<DivID= "Baidumapcontent"></Div>

2. At the bottom of the page (</body> post

<Scripttype= "Text/javascript">

//element ID to show the map

varbaidumapcontent= "baidumapcontent";

//point information to be displayed on the map

varbaidupoints= [{"name":"Spicy Temptation (ten miles Fort shop) new opening in the new opening","Address":"No. 3rd, Metropolis Tower 2, Chaoyang District, Beijing, China (west of Hua Tong Shopping mall)","Tel":"(010) 65579989"," Point":"116.510133,39.923652","Citycode":131}];

</Script>

<Scripttype= "Text/javascript"src= "Http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/js/user.js"></Script>

3. A small map will be created on the page when the page is browsed.

Detailed Description:

In step 2, two variables must be provided and the name cannot be changed, the value can be changed;

varbaidumapcontent= "baidumapcontent";

The value of this variable is 1 the ID of the DOM container, which can be changed, but is consistent with the DOM container's ID and ensures that the DOM container exists

varbaidupoints= [{"name":"Spicy Temptation (ten miles Fort shop) new opening in the new opening","Address":"No. 3rd, Metropolis Tower 2, Chaoyang District, Beijing, China (west of Hua Tong Shopping mall)","Tel":"(010) 65579989"," Point":"116.510133,39.923652","Citycode":131}];

The type of the value of this variable is an array, which holds the point object (currently holds up to 10 point objects)

Point object:

{
"name":"Spicy Temptation (ten miles Fort shop) new opening in the new opening", //name must be filled

"Address":"No. 3rd, Metropolis Tower 2, Chaoyang District, Beijing, China (west of Hua Tong Shopping mall)", //address must be filled

"Tel":"(010) 65579989", //telephone selection and filling

" Point":"116.510133,39.923652", //coordinate required

"Citycode":131 //City Code must fill in

}

The Dot object includes name, address, tel, point, Citycode 5 properties, where name, address, point, Citycode 4 properties are required, tel is optional, if one of the 4 required attributes is empty or does not exist, Then this point will not be shown on the map

Example Address:

Http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/user.html

--------------------------------------------------------------------------------------------------------------- ----------------

Background Management page:

1, first to put a TEXTAREA element and a DOM container on the page

<textareastyle= "width:280px;"ID= "Baidumapinfo">[{"Name": "Spicy Temptation (ten miles Fort shop) new opening in the new opening", "Address": "Ten Li Bao, Chaoyang District, Beijing City, No. 3rd, Metropolis, Tower 2 (west of Hua Tang shopping Mall)", "Tel": "(010) 65579989"}]</textarea>;



<spanID= "Bdmapbutton"></span>

2. At the bottom of the page (</body> post

<Scripttype= "Text/javascript">

varBaidumapinfo= 'Baidumapinfo';//ID of the textarea that holds the point information

varBdmapbutton= 'Bdmapbutton';//container ID for storing map callout buttons

</Script>

<Scripttype= "Text/javascript"src= "Http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/js/admin.js"></Script>

3, this time the page will create a small button on the page, click on the button will pop up a map

Detailed Description:

In step 2, two variables must be provided and the name cannot be changed, the value can be changed;

varBaidumapinfo= 'Baidumapinfo';//ID of the textarea that holds the point information

The value of this variable is 1 in the ID of the textarea container, the modification must be modified at the same time;

varBdmapbutton= 'Bdmapbutton';//container ID for storing map callout buttons

The value of this variable is the ID of the DOM container in 1, which needs to be modified at the same time;

An array is stored in the textarea, which holds the point object (currently holds up to 10 point objects)

Point object:

{

"name":"Spicy Temptation (ten miles Fort shop) new opening in the new opening", //name must be filled

"Address":"No. 3rd, Metropolis Tower 2, Chaoyang District, Beijing, China (west of Hua Tong Shopping mall)", //address must be filled

"Tel":"(010) 65579989", //telephone selection and filling

" Point":"116.510133,39.923652", //when coordinates are selected, they are automatically generated based on address .

"Citycode":131 //City code selection is automatically generated based on address

}

The Dot object includes name, address, tel, point, Citycode 5 properties, where name, address 2 properties are required, tel, points, Citycode is optional, if one of the 2 required attributes is empty or does not exist, That point, will not be marked on the map to display and edit, and point, Citycode 2 properties if not present, will be automatically generated according to address

Point, Citycode 2 property Generation Description: If these two properties exist, then direct read use, if not exist will be automatically generated, when the map is finished, when the map is closed, the value of textarea will be replaced with the re-generated content

How to modify point coordinates:

When the map is opened, the map automatically displays the qualifying points on the map, and clicking on the details on the left will open the bubbles in the corresponding points on the map, and press the left mouse button to hold down the Marker (with elements A, B, C, D, E, F, G, H, I, J) to move the pity dorado coordinates. , after the move is done, click the OK button in the Pity Dorado corresponding information box in the left-hand list, the point coordinates will be changed successfully, if you want to cancel the move, click the corresponding Cancel button.

Example Address:

Http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/admin.html

----------------------------------------------------------------------------------------------------------

Diagram of the front page:

"Baidu Map API"--the first local group purchase site Map Plugin