首页 > 代码库 > 【百度地图API】情人节求爱大作战——添加标注功能

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

2024-10-26 22:26:01   208人阅读

原文:【百度地图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>

 

 

 

 

 

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


联系
我们