[Baidu map API] How do I create a business area map? Administrative map?

Abstract:

If you want to display a certain area and move the mouse up, the area will change color. At this time, you need to use the polygon overlay and Its mouse event!

Come and see where to go network instance: http://hotel.qunar.com/city/beijing_city/#fromDate=2011-07-13&from=qunarHotel&toDate=2011-07-16

 

 

Bytes ---------------------------------------------------------------------------------------------

 

1. Create a map

Here I am using a satellite map and added a fish bone control.

VaRMap =NewBmap. Map ("container", {maptype: bmap_hybrid_map });//Set a satellite map as a base map
Map. centerandzoom (NewBmap. Point (116.404, 39.915), 12 );//Initialize the map and set the coordinates of the center and the map level.
Map. addcontrol (NewBmap. navigationcontrol ());//Add a fish bone Control
Map. addcontrol (NewBmap. maptypecontrol ());//Add map type controls
Map. setcurrentcity ("Beijing ");//Set the city for 3D Map Display. This item is required.
 

 

 

Ii. Create a polygon

You must set the points of a polygon.

We can use the coordinate pick-up tool to find the point. Http://dev.baidu.com/wiki/static/map/API/tool/getPoint/

For example, create a polygon with the Beijing second ring.

//Create a latitude and longitude Array
VaRSecringcenter =NewBmap. Point (116.400244, 39.931757 );
VaRSecring = [NewBmap. Point (116.362875, 39.949459 ),NewBmap. Point (116.378972, 39.956539 ),NewBmap. Point (116.438764, 39.955654 ),NewBmap. Point (116.440488, 39.911836 ),NewBmap. Point (116.365175, 39.905637)];
//Create a polygon
VaRSecringpolygon =NewBmap. polygon (secring, {strokecolor: "blue", strokeweight: 5, strokeopacity: 0.5 });
//Add a polygon to the map
Map. addoverlay (secringpolygon );
 

 

 

3. Add a mouse event to a polygon

1. Mouseover

When you place the cursor over a polygon, the side of the polygon turns red.

Secringpolygon. addeventlistener ("Mouseover ",Function(){
Secringpolygon. setstrokecolor ("red ");
});
 

 

2. mouseout

Correspondingly, if the mouse moves out, the red turns back to the original Blue.

 
Secringpolygon. addeventlistener ("mouseout ",Function(){
Secringpolygon. setstrokecolor ("blue ");
});
 

 

3. Click

Click a polygon to enlarge the map. Set the central point of the map.

 
Secringpolygon. addeventlistener ("click ",Function(){
Map. zoomin ();
Secringpolygon. setstrokecolor ("red ");
Map. setcenter (secringcenter );
});
 

4. Create tags

There are two tags here. One is a small landmark tag.

Is a description of the polygon.

Figure:

VaRSecringlabel2 =NewBmap. Label ("second ring", {offset:NewBmap. Size (10,-20), position: secringcenter });
Secringlabel2.setstyle ({"padding": "2px "});
Map. addoverlay (secringlabel2 );
 

 

 

The second is to place the cursor over the polygon and display the business area description label.

Figure:

 
VaRSecringlabel =NewBmap. Label ("Second Ring Road, Beijing, including Dongcheng District </BR> and Xicheng district. Famous tourist attractions include </BR> Tiananmen, the Palace Museum, Houhai, Beihai </BR> parks, jingshan, and nanluogu Lane. ", {Offset:NewBmap. Size (-150,0), position: secringcenter });
Secringlabel. setstyle ({"padding": "10px", "width": "140px", "border": "1px solid # ccff00 "});
 

 

5. Illustration

In this way, you can add many business districts.

Similarly, you can use this method to create an administrative region map.

Finished diagram in this example:

 

Vi. AllSource code

 <!  Doctype html  > 
 <  Html  > 
 <  Head  > 
 <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charset = gb2312"   /> 
 <  Title  > Business Area </  Title  > 
<  Script  Type  = "Text/JavaScript"  SRC  = "Http://api.map.baidu.com/api? V = 1.2"  > </  Script  > 
 </  Head  > 
 <  Body  > 
 <  Div  Style  = "Z-index: 9; width: 520px; Height: 340px; Border: 1px solid gray"  ID  = "Container"  > </  Div  > 
 </ Body  > 
 </  Html  > 
 <  Script  Type  = "Text/JavaScript"  >  
  VaR  Map  =   New  Bmap. Map (  "  Container  "  , {Maptype: bmap_hybrid_map });  //  Set a satellite map as a base map  
  Map. centerandzoom (  New  Bmap. Point (  116.325218  , 39.977441  ),  12  );  //  Initialize the map and set the coordinates of the center and the map level.  
  Map. addcontrol (  New  Bmap. navigationcontrol ());  //  Add a fish bone Control  
  Map. addcontrol (  New  Bmap. maptypecontrol ());  //  Add map type controls  
  Map. setcurrentcity (  "  Beijing  "  );  //  Set the city for 3D Map Display. This item is required.  
 
  //  Create a second ring  
//  Create a latitude and longitude Array  
  VaR  Secringcenter  =   New  Bmap. Point (  116.400244  ,  39.931757  );
  VaR  Secring  =  [  New  Bmap. Point (  116.362875  ,  39.949459  ),  New  Bmap. Point (  116.378972  ,  39.956539 ),  New  Bmap. Point (  116.438764  ,  39.955654  ),  New  Bmap. Point (  116.440488  ,  39.911836  ),  New  Bmap. Point (  116.365175  ,  39.905637  )];
  //  Create a polygon  
  VaR  Secringpolygon  =   New  Bmap. polygon (secring, {strokecolor:  "  Blue "  , Strokeweight:  5  , Strokeopacity:  0.5  });
  //  Add a polygon to the map  
  Map. addoverlay (secringpolygon );
  //  Add a mouse event to a polygon  
  Secringpolygon. addeventlistener (  "  Mouseover  "  ,  Function  (){
Secringpolygon. setstrokecolor (  "  Red  "  );
Map. addoverlay (secringlabel );
Map. Panto (secringcenter );
});
Secringpolygon. addeventlistener ( "  Mouseout  "  ,  Function  (){
Secringpolygon. setstrokecolor (  "  Blue  "  );
Map. removeoverlay (secringlabel );
});
Secringpolygon. addeventlistener (  "  Click  "  ,  Function  (){
Map. zoomin ();
Secringpolygon. setstrokecolor (  "  Red  "  );
Map. setcenter (secringcenter );
});
  //  Create tags  
  VaR  Secringlabel =   New  Bmap. Label (  "  <B> Beijing Second Ring Road </B>, including Dongcheng District </BR> and Xicheng district. Famous tourist attractions include </BR> Tiananmen, the Palace Museum, Houhai, Beihai </BR> parks, jingshan, and nanluogu Lane.  "  , {Offset:  New  Bmap. Size (  -  150  ,  0  ), Position: secringcenter });
Secringlabel. setstyle ({  "  Z-Index  "  :  "  999999  "  ,  "  Padding  "  :  " 10px  "  ,  "  Width  "  :  "  140px  "  ,  "  Border  "  :  "  1px solid # ccff00  "  });

  VaR  Secringlabel2  =   New  Bmap. Label (  "  Second Ring  "  , {Offset:  New  Bmap. Size (  10 ,  -  30  ), Position: secringcenter });
Secringlabel2.setstyle ({  "  Line-height  "  :  "  20px  "  ,  "  Text-align  "  :  "  Center  "  ,  "  Width  "  :  "  80px  "  ,  "  Height  " :  "  29px  "  ,  "  Border  "  :  "  None  "  ,  "  Padding  "  :  "  2px  "  ,  "  Background  "  :  "  URL (http://jixingjx.com/mapapi/ac.gif) No-repeat  "  ,});
Map. addoverlay (secringlabel2 );

  // Create Haidian District  
//  Create a latitude and longitude Array  
  VaR  Haidiancenter  =   New  Bmap. Point (  116.305958  ,  39.969037  );
  VaR  Haidian  =  [  New  Bmap. Point (  116.352526  ,  39.915599  ),  New  Bmap. Point (  116.278362  ,  39.916485  ),  New Bmap. Point (  116.252491  ,  39.943042  ),  New  Bmap. Point (  116.234669  ,  39.994358  ),  New  Bmap. Point (  116.281812  ,  40.037239  ),  New  Bmap. Point (  116.281812  ,  40.037239  ),  New  Bmap. Point (  116.386446  ,  39.98684  ), New  Bmap. Point (  116.389896  ,  39.968263  ),  New  Bmap. Point (  116.336429  ,  39.960299  )];
  //  Create a polygon  
  VaR  Haidianpolygon  =   New  Bmap. polygon (Haidian, {strokecolor:  "  Blue  "  , Strokeweight:  5  , Strokeopacity:  0.5  });
  // Add a polygon to the map  
  Map. addoverlay (haidianpolygon );
  //  Add a mouse event to a polygon  
  Haidianpolygon. addeventlistener (  "  Mouseover  "  ,  Function  (){
Haidianpolygon. setstrokecolor (  "  Red  "  );
Map. addoverlay (haidianlabel );
Map. Panto (haidiancenter );
});
Haidianpolygon. addeventlistener (  "  Mouseout  "  ,  Function  (){
Haidianpolygon. setstrokecolor (  " Blue  "  );
Map. removeoverlay (haidianlabel );
});
Haidianpolygon. addeventlistener (  "  Click  "  ,  Function  (){
Map. zoomin ();
Haidianpolygon. setstrokecolor (  "  Red  "  );
Map. setcenter (haidiancenter );
});
  //  Create tags  
  VaR  Haidianlabel  =   New  Bmap. Label (  " <B> Haidian District, Beijing </B> is a gathering place for universities in Beijing. Here </BR> covers 80% of Beijing's key universities </BR>. Among them, Tsinghua University and Peking University are home to all of you </BR>.  "  , {Offset:  New  Bmap. Size (  -  150  ,  0  ), Position: haidiancenter });
Haidianlabel. setstyle ({  "  Z-Index  "  :  "  999999  "  ,  "  Padding  "  :  "  10px  "  ,  " Width  "  :  "  140px  "  ,  "  Border  "  :  "  1px solid # ccff00  "  });

  VaR  Haidianlabel2  =   New  Bmap. Label (  "  Haidian District  "  , {Offset:  New  Bmap. Size (  10  ,  -  30 ), Position: haidiancenter });
Haidianlabel2.setstyle ({  "  Line-height  "  :  "  20px  "  ,  "  Text-align  "  :  "  Center  "  ,  "  Width  "  :  "  80px  "  ,  "  Height  "  :  "  29px "  ,  "  Border  "  :  "  None  "  ,  "  Padding  "  :  "  2px  "  ,  "  Background  "  :  "  URL (http://jixingjx.com/mapapi/ac.gif) No-repeat  "  ,});
Map. addoverlay (haidianlabel2 );
  </  Script  >