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

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

 

 

 

 

 

时间: 2024-09-20 07:40:28

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

百度地图api 给多个点添加信息窗口 页面无显示

问题描述 百度地图api 给多个点添加信息窗口 页面无显示 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport&qu

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

原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. 不要犹豫了,就使用快速创建地图工具吧! -------------------------------------------------------------------------------------- 如何快速创建地图? 一.转入百度提供的快速创建地图工具页面:http://openap

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

原文:[百度地图API]暑假放假回老家--城市切换功能 任务描述: 酸奶小妹放寒假啦,要从北京呼啦一下飞回重庆呢.现在百度地图API上不能直接切换城市,怎么办呢?   如何实现: 利用API先搜索到要去城市,然后再让搜索到的城市显示在地图中心点. (百度地图上的实现方式是,给后端一个请求,后端返回该城市的经纬度)   图示:   运行代码:请点击这里   代码:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&

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

原文:[百度地图API]如何激发手机的高分辨率 摘要:不少用户使用百度地图API开发在移动浏览器上的应用时发现,明明自己的手机是高分辨率的,但是显示出来的地图却比较模糊,甚至"看不清楚".接下来,我们要学习如何激发手机浏览器的高分辨率功能. -------------------------------------------------------------------------------- 以安卓手机为例,我们使用PhoneGap来写一段API代码. 代码A: <!DO

【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注

原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo,酒店logo等) 如何在标注上显示信息窗口,以及添加文字标签等其他覆盖物: 最后,介绍一个获取坐标的给力工具. ---------------------------------------------------------------------------------------------------

【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍

原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------------------------------------------------------------------------------------------------------- 哇,好久没有上来了.主要是因为最近工作繁忙,加上休息时间被各种排练.社团活动占满,导致木有更新此博客.

大神们!!百度地图api中标签信息的抓取啊。前js后C#。

问题描述 大神们!!百度地图api中标签信息的抓取啊.前js后C#. 是这样的,一个地图api的调用,我需要获取到百度地图api上的搜索出来的信息,可是获取不到啊啊啊... 解决方案 js版的百度地图还是其他版本的? js版本的,C#是运行于服务器端的,无法直接获取客户端的数据.js搜索后你自己即那个解码后的信息用ajax回发到服务器进行获取

百度地图api-有木有对百度地图API有研究的大神呀

问题描述 有木有对百度地图API有研究的大神呀 用的是百度地图V1.3.5的sdk,现在一运行就卡死在这边,求帮忙~ startMapType(); // 注册定位事件 mLocationListener = new LocationListener() { @Override public void onLocationChanged(Location location) { if (location != null) { myPt = new GeoPoint((int) (location

android-最新版Android百度地图Api中zoomToSpan没有用?求大神解决。。。

问题描述 最新版Android百度地图Api中zoomToSpan没有用?求大神解决... 代码如下: /** * 在百度地图上显示搜索的结果; */ private void showSearchResultInBaiduMap() { MyOverlayManager overlay = new MyOverlayManager(mBaiduMap); mBaiduMap.setOnMarkerClickListener(overlay); overlay.addToMap(); overl