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

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

  1. <script type="text/javascript" src="http://api.map.baidu.com/api?ak=个人申请的AK&v=2.0&services=false"></script>
  2. <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
  3. <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>

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

  1. <body>
  2. 	<div id="content" class="content">
  3. 		<input type="text" value="" id="keyword" /> <input type="button"
  4. 			name="" id="" value="查询" onclick="search()" />
  5. 		<div style="width: 600px; height: 500px; border: 0px solid gray"
  6. 			id="container"></div>
  7. 		<p id="tx"></p>
  8. 		<script type="text/javascript">
  9. 			//创建Map实例
  10. 			var map = new BMap.Map("container");
  11. 			var point = new BMap.Point(116.404, 39.915);
  12. 			//设置中心点
  13. 			map.centerAndZoom(point, 11);
  14. 			map.setCurrentCity("北京");
  15. 			//添加鼠标滚动缩放
  16. 			map.enableScrollWheelZoom();
  17.  
  18. 			//添加缩略图控件
  19. 			map.addControl(new BMap.OverviewMapControl({
  20. 				isOpen : false,
  21. 				anchor : BMAP_ANCHOR_BOTTOM_RIGHT
  22. 			}));
  23. 			//添加缩放平移控件
  24. 			map.addControl(new BMap.NavigationControl());
  25. 			//添加比例尺控件
  26. 			map.addControl(new BMap.ScaleControl());
  27. 			//添加地图类型控件
  28. 			map.addControl(new BMap.MapTypeControl());
  29.  
  30. 			var cr = new BMap.CopyrightControl({
  31. 				anchor : BMAP_ANCHOR_TOP_RIGHT
  32. 			});
  33. 			//设置版权控件位置
  34. 			var bs = map.getBounds();
  35. 			//返回地图可视区域
  36. 			cr.addCopyright({
  37. 				id : 1,
  38. 				content : "<a href='#' style='font-size:16px;'>版权控件</a>",
  39. 				bounds : bs
  40. 			})
  41. 			//添加版权控件
  42. 			map.addControl(cr);
  43. 			//全景控件
  44. 			map.addControl(new BMap.PanoramaControl());
  45. 			//是否显示路况提示面板
  46. 			var ctrl = new BMapLib.TrafficControl({
  47. 				showPanel : false
  48. 			});
  49. 			ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
  50. 			map.addControl(ctrl);
  51. 			//圆形覆盖物
  52. 			var circle = new BMap.Circle(new BMap.Point(116.404, 39.915), 1000,
  53. 					{
  54. 						fillColor : "red"
  55. 					});
  56. 			map.addOverlay(circle);
  57.  
  58. 			//设置标注的图标
  59. 			//var icon = new BMap.Icon("map-marker-icon.png",new BMap.Size(50,50));
  60. 			// 创建标注
  61. 			var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
  62. 			//把标注添加到地图上
  63. 			map.addOverlay(marker);
  64. 			//信息窗口
  65. 			var content = "<table>";
  66. 			content = content + "<tr><td> 地点：北京市区</td></tr>";
  67. 			content = content + "<tr><td> 时间：2016-1-9</td></tr>";
  68. 			content += "</table>";
  69. 			var infowindow = new BMap.InfoWindow(content);
  70. 			marker.addEventListener("mouseover", function() {
  71. 				this.openInfoWindow(infowindow);
  72. 			});
  73. 			marker.addEventListener("mouseout", function() {
  74. 				this.closeInfoWindow();
  75. 			});
  76. 			//点击地图，获取经纬度坐标
  77. 			map.addEventListener("click", function(e) {
  78. 				document.getElementById("tx").innerHTML = "经度坐标：" + e.point.lng
  79. 						+ "  纬度坐标：" + e.point.lat;
  80. 			});
  81.  
  82. 			//关键字搜索
  83. 			function search() {
  84. 				var keyword = document.getElementById("keyword").value;
  85. 				var local = new BMap.LocalSearch(map, {
  86. 					renderOptions : {
  87. 						map : map
  88. 					}
  89. 				});
  90. 				local.search(keyword);
  91. 			}
  92. 		</script>
  93. 	</div>
  94. </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. JS动态级联菜单

    JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...

  2. C#与Swift异步操作的差异

    作为一个从C#转到Swift的小菜鸡...最近做一个简单的请求API解析Json数据的小程序上碰到一堆小问题.尤其是在异步请求的时候,用惯了C#的async/await写法,在写Swift的时候也按着 ...

  3. javascript基础知识-数组

    1.javascript创建数组时无需声明数组大小或者在数组大小变化时重新分配 2.javascript数组是无类型的 3.数组元素不一定要连续 4.针对稀疏数组,length比所有元素的索引都要大 ...

  4. 一款免费支持PDF、word、excel、PPT、jpeg之间互转线上软件

    偶然发现的一款免费支持PDF.word.excel.PPT.jpeg之间互转,支持合并pdf.加密解密PDF的线上软件,首先声明,不是广告党,我自己试用过,确实是目前我用过最好用的,如果有朋友有更好的 ...

  5. MVC 会员注册

    @{ ViewBag.Title = "Register"; } <script src="~/Scripts/jquery-2.1.0.js">& ...

  6. bower 问题

    没法写成bower install jquery bootstrap:只能是bower install jquery; bower install bootstrap

  7. C#中Directory.GetFiles() 函数的使用

    C#中Directory.GetFiles(string path , string searchPattern, SearchOption searchOption ) 获取path目录中所有文件 ...

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

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

  9. CocoaPods的版本升级

    我们在项目开发过程中为了更好的管理项目中引用的一些第三方的开源代码,我们在项目开发中都会使用CocoaPods,在项目中不使用Cocoapods可以绕过这篇帖子,但是Cocopods升级比较快,但是怎 ...

  10. 如何遍历HashMap

    HashMap的遍历有两种常用的方法,那就是使用keyset及entryset来进行遍历,但两者的遍历速度是有差别的 java Map 遍历速度最优解 第一种: Map map = new HashM ...