首先在百度开发者中心申请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. 黑马程序员_Java基础：IO流总结

    ------- android培训.java培训.期待与您交流! ---------- IO流在是java中非常重要,也是应用非常频繁的一种技术.初学者要是能把IO技术的学透,java基础也就能更加牢 ...

  2. Cobbler学习之二--Cobbler的Web管理和维护

    Cobbler的Web管理模块和命令行模块是可以分开工作的,没有依赖关系. 1 WebUI的功能 查看所有的对象和配置文件 添加或者删除system,distro, profile 执行“cobble ...

  3. MongoDB学习笔记-04 索引

    索引是用来加速查询的.有了索引之后,数据库不必进行全表扫描,只需先在索引中查找,再根据找到的索引查找数据.MongoDB的索引几乎和传统关系型数据库一样. 创建索引 创建索引是在相应的集合中使用ens ...

  4. js获取select标签选中的值

    <p>        城市:         <select id="Select1" name="D1">            &l ...

  5. 转：linux coredump调试

    1 )如何生成 coredump 文件 ? 登陆 LINUX 服务器,任意位置键入 echo "ulimit -c 1024" >> /etc/profile 退出 L ...

  6. 深入浅出C#中的静态与非静态

    C#语言静态类 vs 普通类  C#语言静态类与普通类的区别有以下几点: 1)C#语言静态类无法实例化而普通类可以: 2)C#语言静态类只能从System.Object基类继承:普通可以继承其它任何非 ...

  7. Java学习笔记二——标识符和关键字

    标识符 定义 标识符的定义:对各种变量.方法和类等要素命名时使用的字符序列成为标识符. 简单地说,就是凡是自己可以起名字的地方都叫标识符,都要遵守标识符的规则. 命名规则 标识符只能由字母.下划线&q ...

  8. Android中Button、ImageButton、ImageView背景设置区别

    Button与ImageButton实际两者无关,Button继承自TextView,不支持src;ImageButton继承自ImageView.同一张图片在不设置大小,默认显示时,使用Button ...

  9. php图片处理类库 Image

    image 下载地址 https://github.com/Intervention/image.git 下载之后解压 执行composer update 生成 autoload.php文件   该类 ...

  10. 练习1-12：编写一个程序，以每行一个单词的形式打印其输入（C程序设计语言 第2版）

    #include <stdio.h> #define NOT_BLANK 1 #define BLANK 0 main() { int c; int last_ch = NOT_BLANK ...