【百度地图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 © 酸奶小妹</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】情人节求爱大作战——添加标注功能的更多相关文章
- 【百度地图API】如何快速创建带有标注的地图？——快速创建地图工具+如何标注商家
原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. ...
- 【百度地图API】暑假放假回老家——城市切换功能
原文:[百度地图API]暑假放假回老家--城市切换功能 任务描述: 酸奶小妹放寒假啦,要从北京呼啦一下飞回重庆呢.现在百度地图API上不能直接切换城市,怎么办呢? 如何实现: 利用API先搜索到要去城 ...
- 百度地图API如何给自定义覆盖物添加事件
摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...
- 百度地图API示例之小实践 添加代理商标注
地图坐标无非是经度纬度. 每个代理商都有他的经度纬度参数,就能够在地图上标注出来了. 效果如下: 功能包括 标记代理商 显示导航 显示距离 测量距离 点击选中等 其中测距用到的是自定义控件 地图根据城 ...
- 百度地图API示例：使用vue添加删除覆盖物
1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...
- 百度地图API 循环向 marker 添加 click事件
使用百度地图API,循环向marker添加InfoWindow时,所有的marker点击弹出的inforwindow为最后一个添加的infowindow,百度后,使用js闭包解决此问题,直接贴代码: ...
- 用百度地图API打造方便自己使用的手机地图
有钱人咱就不说了,因为偶是个穷银--因为穷,所以去年买的Huawei C8650+到现在还在上岗,对于没有钱买好的配置的手机的童鞋来说,类似于百度,谷歌,高德等商家的地图在自己的机器上跑起来确实是有点 ...
- 数据视化Echarts+百度地图API实现市县区级下钻
开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
- 【百度地图API】如何激发手机的高分辨率
原文:[百度地图API]如何激发手机的高分辨率 摘要:不少用户使用百度地图API开发在移动浏览器上的应用时发现,明明自己的手机是高分辨率的,但是显示出来的地图却比较模糊,甚至“看不清楚”.接下来,我们 ...
随机推荐
- 深入理解Javascript闭包概念
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部能够直接读取全局变量 ...
- PowerDesigner有几个需要设置
安装后PDM后.一些易于使用的设计人才需求. 一. 建立name与code做自己的主动关联,我们输入name当你不希望个别及连带code已经改变. 打开Tools->General Option ...
- Chapter 1 Securing Your Server and Network(8):停止未使用的服务
原文:Chapter 1 Securing Your Server and Network(8):停止未使用的服务 原文出处:http://blog.csdn.net/dba_huangzj/arti ...
- Eclipse+超快速的模拟器Genymotion开展Android申请书（第一步：安装和配置Genymotion）
一.安装和配置Genymotion (1)因为Eclipse自带SDK模拟器,慢启动,别说 今天给大家介绍一个更快速的模拟器Genymotion (2)第一次去Genymotion在官方网站上注册一个 ...
- js便签笔记（13）——jsonp事实上非常easy【ajax跨域请求】
前两天被问到ajax跨域怎样解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了很多资料,原来如此.. . 为何一直知道jsonp,但一直迷迷糊糊的不明 ...
- hdu 3081 hdu 3277 hdu 3416 Marriage Match II III IV //灵活运用最大流量
3081 意甲冠军: n女生选择不吵架,他甚至男孩边(他的朋友也算.并为您收集过程).2二分图,一些副作用,有几个追求完美搭配(每场比赛没有重复的每一个点的比赛) 后.每次增广一单位,(一次完美匹配) ...
- HDU 1272 小希迷宫（并检查集合）
意甲冠军:被判处无向图无环和连接无处不在 思考:并检查集合,trap 您可能有一个直接输入0 0 并且....合并的时候按某一个方向会爆栈,爆了好几次...下次考虑一下直接递归找祖先吧 #includ ...
- Atitit..文件上传组件选择and最佳实践的总结(2)----HTTP
Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 怎样推断一个插件/控件是否支持断点续传?? 1 3. 经常使用的组件选型结果::马 1 4. ...
- 朝花夕拾-4-shell
引言 shell,我们常常会用到,以其强大的功能,会帮助我们解决非常多棘手的问题.近期遇到一个问题,要跑非常多case,假设串行的执行,须要非常久.能不能让他们并行起来,但又不能全部case都并行执行 ...
- leetcode第一刷_Length of Last Word
不是非常明确出题人的意图,事实上这道题用java的话简直是太简单了,用split处理一下,得到全部单词的一个数组,然后求最后一个的长度即可了.我个人认为java里最成功的函数就是split了,我做pr ...