首先在百度开发者中心申请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. 使用PouchDB来实现React离线应用

    最近听到有同学在讨论关于数据上传遇到离线的问题,因此在这里介绍一下PouchDB. PouchDB 是一个开源的javascript数据库,他的设计借鉴于Apache CouchDB,我们可以使用他来 ...

  2. linux时钟基本概念、CST与UTC、以及NTP简单设置

    1,安装linux的时候在设置时间的时候有一个选项:system clock uses UTC,那么这个UTC是什么意思呢? 世界协调时间(Universal Time Coordinated,UTC ...

  3. （混合背包 多重背包+完全背包）The Fewest Coins （poj 3260）

    http://poj.org/problem?id=3260   Description Farmer John has gone to town to buy some farm supplies. ...

  4. [Leetcode][JAVA] Interleaving String

    Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Given:s1 = ...

  5. Python学习之路--面向对象

    1.面向对象概述 面向过程:根据业务逻辑从上到下写垒代码  函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可  面向对象:对函数进行分类和封装,让开发“更快更好更强...”  面向 ...

  6. cocos2d-x项目实现android视频播放参考链接

    http://blog.csdn.net/xiaominghimi/article/details/6870259 http://blog.csdn.net/kaitiren/article/deta ...

  7. CCNA第四章第五章Cisco的IOS与SDM及其管理考试要点学习笔记

    1. IOS的用户界面        Cisco互联网操作系统(IOS)是思科路由器和大多数交换机的核心,它是一个可以提供路由,交换,网络互联以及远程通信功能的专有内核. Cisco路由器的IOS软件 ...

  8. wangEditor ie9 表单上传图片

    wangEditor ie9 表单上传图片  弹框无法消失  var resultText = $.trim(iframeWindow.document.body.innerHTML); result ...

  9. jQuery树形菜单(1)jquery.treeview

    jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...

  10. SecureCRT使用sz和rz命令进行文件的上传和下载

    SecureCRT可以使用sz和rz命令进行文件的上传和下载. sz文件下载: 格式:sz 文件名称 即可将服务器的文件下载至本地. rz文件上传: 格式:rz 文件名称 即可将本地文件上传至服务器. ...