【百度地图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*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 © 酸奶小妹</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>
<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*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 © 酸奶小妹</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>
