首先在百度开发者中心申请ak

在页面head中引用必要的css样式和js脚本

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=个人申请的AK&v=2.0&services=false"></script>

<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>

地图展示页面，具体的功能已经注释

<body>

	<div id="content" class="content">

		<input type="text" value="" id="keyword" /> <input type="button"

			name="" id="" value="查询" onclick="search()" />

		<div style="width: 600px; height: 500px; border: 0px solid gray"

			id="container"></div>

		<p id="tx"></p>

		<script type="text/javascript">

			//创建Map实例

			var map = new BMap.Map("container");

			var point = new BMap.Point(116.404, 39.915);

			//设置中心点

			map.centerAndZoom(point, 11);

			map.setCurrentCity("北京");

			//添加鼠标滚动缩放

			map.enableScrollWheelZoom();

			//添加缩略图控件

			map.addControl(new BMap.OverviewMapControl({

				isOpen : false,

				anchor : BMAP_ANCHOR_BOTTOM_RIGHT

			}));

			//添加缩放平移控件

			map.addControl(new BMap.NavigationControl());

			//添加比例尺控件

			map.addControl(new BMap.ScaleControl());

			//添加地图类型控件

			map.addControl(new BMap.MapTypeControl());

			var cr = new BMap.CopyrightControl({

				anchor : BMAP_ANCHOR_TOP_RIGHT

			});

			//设置版权控件位置

			var bs = map.getBounds();

			//返回地图可视区域

			cr.addCopyright({

				id : 1,

				content : "<a href='#' style='font-size:16px;'>版权控件</a>",

				bounds : bs

			})

			//添加版权控件

			map.addControl(cr);

			//全景控件

			map.addControl(new BMap.PanoramaControl());

			//是否显示路况提示面板

			var ctrl = new BMapLib.TrafficControl({

				showPanel : false

			});

			ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);

			map.addControl(ctrl);

			//圆形覆盖物

			var circle = new BMap.Circle(new BMap.Point(116.404, 39.915), 1000,

					{

						fillColor : "red"

					});

			map.addOverlay(circle);

			//设置标注的图标

			//var icon = new BMap.Icon("map-marker-icon.png",new BMap.Size(50,50));

			// 创建标注

			var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));

			//把标注添加到地图上

			map.addOverlay(marker);

			//信息窗口

			var content = "<table>";

			content = content + "<tr><td> 地点：北京市区</td></tr>";

			content = content + "<tr><td> 时间：2016-1-9</td></tr>";

			content += "</table>";

			var infowindow = new BMap.InfoWindow(content);

			marker.addEventListener("mouseover", function() {

				this.openInfoWindow(infowindow);

			});

			marker.addEventListener("mouseout", function() {

				this.closeInfoWindow();

			});

			//点击地图，获取经纬度坐标

			map.addEventListener("click", function(e) {

				document.getElementById("tx").innerHTML = "经度坐标：" + e.point.lng

						+ "  纬度坐标：" + e.point.lat;

			});

			//关键字搜索

			function search() {

				var keyword = document.getElementById("keyword").value;

				var local = new BMap.LocalSearch(map, {

					renderOptions : {

						map : map

					}

				});

				local.search(keyword);

			}

		</script>

	</div>

</body>

实现效果图如下：

按照惯例，最后附一个百度在线api：http://developer.baidu.com/map/jsdemo.htm#i1_1

其实，每个新功能通过api都有详细的demo,所以好的api事半功倍

百度地图 api的更多相关文章

  1. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

  2. 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]

    ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...

  3. 百度地图API 批量添加 带检索功能的信息窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 百度地图api的覆盖物样式与bootstrap样式冲突解决办法

    使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧 宽度变得非常窄 正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...

  5. 百度地图API试用--(初次尝试)

    2016-03-17: 百度地图API申请key的步骤相对简单,不做过多阐述. 初次使用百度地图API感觉有点神奇,有些功能加进来以后有点问题,注释掉等有空再解决. 代码如下: <%@ page ...

  6. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  7. 百度地图API简单应用

    在做移动端应用时经常用到百度地图API,百度API有强大的示例和文档,开发之前去百度相关网站注册密钥,很块博主只花了几分钟 百度地图API范例 百度地图API文档说明 例子1:输入特定关键字绘制地图标 ...

  8. Winform实现用多线程、百度地图API解析某公司的物理地址

    前言 作为一个很挫的C#新手总喜欢自己写点儿不着边际的东西,本人是个新手加菜鸟,写B/S的,工作中,任务完成了,空闲下来,总想继续学点儿什么,由此触发了本篇文章了.个人一直认为,.NET中,C/S所要 ...

  9. 百度地图API的IP定位城市和浏览器定位（转）

    百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ...

  10. 百度地图api

    引入js <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak ...

随机推荐

  1. 如何牢记C/C++中const的用法？

    (下面以 typename 表示C/C++内某一类型 我常常会搞混 const 放在 typename* 的前面和后面的区别,今天特地查看了它们两个各自的含义,总结了一下: const typenam ...

  2. 结对项目——高级四则运算检验器记录（168 & 187）

    首先,上图(*+﹏+*)~@ 1.如何看待结对编程 结对编程优点: 1.两个人能够相互支持,相互监督,客服编程过程中可能出现的烦躁的情况0_0. 2.在开发功能的同时,伴随了UnitTest的进行,可 ...

  3. 一步一步安装hive

    安装hive 1.下载hive-0.11.0.tar.gz,解压; 2.下载mysql-connector-java-5.1.29-bin.jar并放到hive/lib/下: 3.配置hive/con ...

  4. php 用户ip的获取

    $_SERVER 这个变量我很喜欢,里面有很多服务器和用户的配置.资料.特别是在获取用户ip 的时候 直接$_SERVER['REMOTE_ADDR'] 就可以或许,但这是没有使用 反向代理服务器的情 ...

  5. day12---python mysql pymsql sqlalchemy ORM

    RDBMS 术语 在我们开始学习MySQL 数据库前,让我们先了解下RDBMS的一些术语: 数据库: 数据库是一些关联表的集合.. 数据表: 表是数据的矩阵.在一个数据库中的表看起来像一个简单的电子表 ...

  6. windows phone 8.1教务在线客户端（后续）

    经过了一番折腾,这个wp教务在线算是告一段落了,其实原理很简单,就是post方式访问登陆页面返回cookie,然后带着这个cookie用get方式继续访问你想要访问并取回内容的页面,而且httpcli ...

  7. myrocks之事务处理

    前言 mysql目前支持的事务引擎有innodb,tokudb. rocksdb加入mysql阵营后,mysql支持的事务引擎增长至3个.myrocks目前支持的事务隔离级别有read-committ ...

  8. android权限permission大全

    1.Android.permission.WRITE_USER_DICTIONARY允许应用程序向用户词典中写入新词 2.android.permission.WRITE_SYNC_SETTINGS写 ...

  9. OAuth 2.0 授权原理

    出处:http://www.cnblogs.com/neutra/archive/2012/07/26/2609300.html 最近在做第三方接入的,初步定下使用OAuth2协议,花了些时间对OAu ...

  10. Angular实现递归指令 - Tree View

    在层次数据结构展示中,树是一种极其常见的展现方式.比如系统中目录结构.企业组织结构.电子商务产品分类都是常见的树形结构数据. 这里我们采用Angular的方式来实现这类常见的tree view结构. ...