time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > 【百度地图API】情人节求爱大作战——添加标注功能

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

时间:2011-03-22 23:16 点击:1155次 字体:[ ]




任务描述:

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

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

 

如何实现:

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

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

 

图示:

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

 

 

代码如下:

 

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


本文地址 : http://www.fengfly.com/plus/view-197330-1.html
标签: 百度地图 API 标注
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: