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

 

任务描述:

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

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

 

如何实现:

  给地图增加一个事件监听,addEventListener;

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

 

图示:

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

 

运行代码,请点击这里

 

代码如下:

 

<! 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 >

 

 

 

 

 

你可能感兴趣的:(百度地图)