原文:【百度地图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 &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");    // 创建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>

【百度地图API】情人节求爱大作战——添加标注功能的更多相关文章

  1. 【百度地图API】如何快速创建带有标注的地图？——快速创建地图工具+如何标注商家

    原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. ...

  2. 【百度地图API】暑假放假回老家——城市切换功能

    原文:[百度地图API]暑假放假回老家--城市切换功能 任务描述: 酸奶小妹放寒假啦,要从北京呼啦一下飞回重庆呢.现在百度地图API上不能直接切换城市,怎么办呢? 如何实现: 利用API先搜索到要去城 ...

  3. 百度地图API如何给自定义覆盖物添加事件

    摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...

  4. 百度地图API示例之小实践 添加代理商标注

    地图坐标无非是经度纬度. 每个代理商都有他的经度纬度参数,就能够在地图上标注出来了. 效果如下: 功能包括 标记代理商 显示导航 显示距离 测量距离 点击选中等 其中测距用到的是自定义控件 地图根据城 ...

  5. 百度地图API示例：使用vue添加删除覆盖物

    1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...

  6. 百度地图API 循环向 marker 添加 click事件

    使用百度地图API,循环向marker添加InfoWindow时,所有的marker点击弹出的inforwindow为最后一个添加的infowindow,百度后,使用js闭包解决此问题,直接贴代码: ...

  7. 用百度地图API打造方便自己使用的手机地图

    有钱人咱就不说了,因为偶是个穷银--因为穷,所以去年买的Huawei C8650+到现在还在上岗,对于没有钱买好的配置的手机的童鞋来说,类似于百度,谷歌,高德等商家的地图在自己的机器上跑起来确实是有点 ...

  8. 数据视化Echarts+百度地图API实现市县区级下钻

    开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...

  9. 【百度地图API】如何激发手机的高分辨率

    原文:[百度地图API]如何激发手机的高分辨率 摘要:不少用户使用百度地图API开发在移动浏览器上的应用时发现,明明自己的手机是高分辨率的,但是显示出来的地图却比较模糊,甚至“看不清楚”.接下来,我们 ...

随机推荐

  1. NEON简单介绍

    个128位四字寄存器Q0-Q15,32个64位双字寄存器D0-D31,两个寄存器是重叠的,在使用的时候须要特别注意,不小心就会被覆盖掉. NEON的数据类型:无符号整数.有符号整数.未指定类型的整数. ...

  2. Velocity脚本新手教程

    从网络下的数据汇编 一.Velocity简介 Velocity它是Apache该公司的开源产品,它是一套基于Java语言模板引擎,背景可以非常灵活的数据与模板文件一起反对.他直言不讳地说:,人使用模板 ...

  3. 【Android基础】listview控件的使用(2)-------继承自ListActivity的普通listview

    由于listview在android控件中的重要性,所以android为我们直接封装了一个类ListviewActivity,直接将listview封装在了activity之中,在本篇中,我将介绍在L ...

  4. ARM装配说明MCR/MRC学习

    MCR指令ARM数据寄存器传送到协处理器寄存器.假设协处理器不能成功运行操作.会产生未定义指令中止. 语法教学格式: MCR{<cond>} p15, 0, <Rd>, < ...

  5. SVM算法实现（一）

    关键字(keywords):SVM 支持向量机 SMO算法 实现 机器学习 假设对SVM原理不是非常懂的,能够先看一下入门的视频,对帮助理解非常实用的,然后再深入一点能够看看这几篇入门文章,作者写得挺 ...

  6. C该结构变化 struct typedef

     这几天看代码,看到若干类型的结构,例如下列结构声明: struct    book{ string name; int price; int num; }; 此种结构定义结构变量的格式例如以下: ...

  7. js实现鼠标拖拽div-------Day44

    假设去问这样一个问题"你认为鼠标操作简单,还是键盘操作简单",相信会有多数人都会回答鼠标吧,毕竟键盘button那么多,假设手小了或者手法不规范了,太easy出问题了,也对操作的速 ...

  8. Unicode字段也有collation

    原文:Unicode字段也有collation 转自:http://blogs.msdn.com/b/apgcdsd/archive/2011/01/11/unicode-collation.aspx ...

  9. lua 怎样输出树状结构的table？

    为了让游戏前端数据输出更加条理,做了一个简单树状结构来打印数据. ccmlog.lua local function __tostring(value, indent, vmap) local str ...

  10. Repository、IUnitOfWork 和 IDbContext 的实践

    Repository.IUnitOfWork 和 IDbContext 的实践 好久没写 DDD 领域驱动设计相关的文章了,嘎嘎!!! 这几天在开发一个新的项目,虽然不是基于领域驱动设计的,但我想把 ...