任务描述:
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"); // 创建mapvar 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>