【百度地图API】情人节求爱大作战——添加标注功能

 

任务描述：

　　2月2日是除夕，2月14立马来！即将到来的情人节，你想送TA一份什么礼物呢？

　　不如，在你们居住的地方，画个大大的桃心，表达你对TA的爱意吧！　　

 

如何实现：

　　给地图增加一个事件监听，addEventListener；

     当鼠标点击地图时，首先获取改点坐标，其次在改点坐标处增加一个红色标注。

 

图示：

 

运行代码，请点击这里。

 

代码如下：

 

   
   <!
   DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
   >
   

   <
   html 
   xmlns
   ="http://www.w3.org/1999/xhtml"
   >
   

   <
   head
   >
   

   <
   meta 
   http-equiv
   ="Content-Type"
    content
   ="text/html;charset=UTF-8"
    
   />
   

   <
   title
   >
   酸奶小妹——百度地图API学习
   </
   title
   >
   

   <
   meta 
   http-equiv
   ="X-UA-Compatible"
    content
   ="IE=EmulateIE7"
    
   />
   

   <
   script 
   type
   ="text/javascript"
    src
   ="http://api.map.baidu.com/api?key=25f144bb4491f54b83a7a7b39198c11e&v=1.1&services=ture"
    
   ></
   script
   >
   

   <
   link 
   rel
   ="stylesheet"
    type
   ="text/css"
    href
   ="static/base.css"
    media
   ="screen"
    
   />
   

   </
   head
   >
   

   <
   body
   >
   

   <
   div 
   class
   ="wrapper"
   >
   

   <
   div 
   class
   ="header"
   >
   

   <
   h1
   >
   新增marker
   </
   h1
   >
   

   <
   p
   ><
   span 
   class
   ="f-r"
   >
   2011-01-14
   </
   span
   >
   任务描述:
   </
   p
   >
   

   <
   p
   >
   鼠标点击地图，即可新增一个标注。
   </
   p
   >
   

   </
   div
   >
   

   <
   div 
   class
   ="container clearfix"
   >
   

   <
   div 
   id
   ="mapBox"
    class
   ="myMap f-l"
   ></
   div
   >
   

   </
   div
   >
   

   <
   div 
   class
   ="info"
   >
   

   <
   p
   >
   谷歌广告:
   </
   p
   >
   

   <
   div 
   style
   ="clear:both"
   >
   

   <
   script 
   type
   ="text/javascript"
   >
   <!--
   
 google_ad_client 
   =
    
   "
   ca-pub-5845154460812025
   "
   ;

   /*
    横幅728&#42;90 
   */
   
 google_ad_slot 
   =
    
   "
   8606107205
   "
   ;
 google_ad_width 
   =
    
   728
   ;
 google_ad_height 
   =
    
   90
   ;

   //
   -->
   

    
   </
   script
   >
   

   <
   script 
   type
   ="text/javascript"
   
 src
   ="http://pagead2.googlesyndication.com/pagead/show_ads.js"
   >
   

   </
   script
   >
   

   </
   div
   >
   

   </
   div
   >
   

   <
   div 
   class
   ="footer"
   >
    

   <
   span 
   class
   ="f-r"
   >
   COPYRIGHT 
   &copy;
    酸奶小妹
   </
   span
   >
   

   <
   span
   >
   友情链接:

   <
   a 
   target
   ="_blank"
    href
   ="http://openapi.baidu.com/map/index.html"
   >
   百度地图API
   </
   a
   >
   |

   <
   a 
   target
   ="_blank"
    href
   ="http://tieba.baidu.com/f?kw=%B0%D9%B6%C8%B5%D8%CD%BCapi&fr=tb0_search&ie=utf-8"
   >
   百度地图API贴吧
   </
   a
   >
   |

   <
   a 
   target
   ="_blank"
    href
   ="http://map.baidu.com/"
   >
   百度地图
   </
   a
   >
   |

   <
   a 
   target
   ="_blank"
    href
   ="http://www.cnblogs.com/milkmap/"
   >
   酸奶小妹
   </
   a
   >
   

   </
   span
   >
    

   </
   div
   >
    

   </
   div
   >
   

   </
   body
   >
   


   <
   script 
   type
   ="text/javascript"
   >
   

   var
    map 
   =
    
   new
    BMap.Map(
   "
   mapBox
   "
   ); 
   //
    创建map
   

   var
    point 
   =
    
   new
    BMap.Point(
   116.411053
   ,
   39.950507
   ); 
   //
    确定中心点
   

   map.centerAndZoom(point,
   16
   ); 
   //
    初始化地图map,设置中心点和地图级别。
   

   
map.addEventListener(
   "
   click
   "
   , 
   function
    (e) {
 point 
   =
    
   new
    BMap.Point(e.point.lng, e.point.lat);

   var
    marker 
   =
    
   new
    BMap.Marker(point);
 map.addOverlay(marker); 
 });


   </
   script
   >
   

   </
   html
   >