首先在百度开发者中心申请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. win10周年更新后程序各种卡死，进程无法结束怎么破？

    最近THINKPAD T460P更新了WIN10周年版后程序各种卡死,运行一段时间,各种程序就开始崩溃,进程无法结束,最终只能强制关机. 这个BUG微软已经确认了,安装了SSD+HDD双硬盘的WIN1 ...

  2. Android开机启动Activity或者Service方法

    本文出自 “Bill_Hoo专栏” 博客,请务必保留此出处http://billhoo.blog.51cto.com/2337751/761230 这段时间在做Android的基础开发,现在有一需求是 ...

  3. linux Ubuntu(Segmentation fault)段错误出现原因及调试方法

      在linux下编译了一个程序,尝试运行的时候出现: Segmentation fault (core dumped) 初步确认为...完全不知道是什么玩意. 于是找度娘了. ----------- ...

  4. jquery datepicker 只显示年月

    首先修改默认日期赋值 <script type="text/javascript"> $(function(){ $('#searchDate').datepicker ...

  5. 使用XtraReport的CalculatedFiled(计算字段)实现RDLC报表中表达式

    DevExpress报表确实强大,花样繁多,眼花缭乱. 这次使用XtraReport开发报表,很多问题在官方的文档中并没有详细的说明,特此记录. 1.XtraReport中FormattingRule ...

  6. Javascript事件机制兼容性解决方案

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

  7. Linux 循环

    200 ? "200px" : this.width)!important;} --> 简介 if循环 if conditon then commandselse comma ...

  8. memcache（三）内存管理

    memcached(三)内存管理 memcached使用预申请的方式来管理内存的分配,从而避免内存碎片化的问题.如果采用mallo和free来动态的申请和销毁内存,必然会产生大量的内存碎片. 基本知识 ...

  9. 分享一些Hadoop环境搭建所用到的软件

    本来想用土的掉渣的语言说说hadoop配置的,因为最近总有人问我,环境搭建老出莫名其妙的问题,可是写到一半,还是决定不写了,网上教程好多好多,而大家遇到问题有很多是软件版本不对应造成的,因此我就把大家 ...

  10. 《OOC》笔记(4)——自动化地将C#代码转化为C代码(结构版)

    <OOC>笔记(4)——自动化地将C#代码转化为C代码(结构版) 我在<C表达面向对象语言的机制——C#版>中已经说明了从C#到C的转换方法.这次看<OOC>也是想 ...