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

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_34174422

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量71

点赞数

文章标签： javascript xhtml ViewUI

为迎接情人节，本文介绍如何使用百度地图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" > 
</ 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 >