最近做了个项目，其中项目中有个需求需要用到百度地图进行导航，通过查阅相关资料参考百度地图api完成了一个例子。

API地址：http://developer.baidu.com/map/jsdemo.htm#a1_2

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <style type="text/css">
 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
 </style>
 <!--调用百度api -->
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
 <title>地图展示</title>
</head>
<body>
 <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
 // 百度地图API功能
 var map = new BMap.Map("allmap"); // 创建Map实例
 map.centerAndZoom("西安", 5);  // 初始化地图,用城市名设置地图中心点
 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
 map.setCurrentCity("深圳");   // 设置地图显示的城市 此项是必须设置的
 map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放
 var point = new BMap.Point(116.404, 39.915);
 var marker = new BMap.Marker(point); // 创建点
 map.addOverlay(marker); //添加点
 map.removeOverlay(marker); //删除点
 // 创建地址解析器实例
 var myGeo = new BMap.Geocoder();
 //批量解析
 var adds = ["长沙", "深圳", "香港", "郑州 ", "惠州", "南昌", "赣州", "中山", "阳江", "上海", "无锡", "南京"];
 for (var i = 0; i < adds.length; i++) {
  myGeo.getPoint(adds[i], function (point) {
   if (point) {
    var address = new BMap.Point(point.lng, point.lat);
    var marker = new BMap.Marker(address);
    map.addOverlay(marker);
    var opts = {
     width: 120,  // 信息窗口宽度
     height: 70,  // 信息窗口高度
     title: "项目信息" // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow("<a href='#' target='blank'>查看详情</a>", opts); // 创建信息窗口对象
    marker.addEventListener("click", function () {
     map.openInfoWindow(infoWindow,address); //开启信息窗口
    });
   }
  }, "深圳市");
 }
 getBoundary("中国");
 function getBoundary(sRegion) {
  var bdary = new BMap.Boundary();
  bdary.get(sRegion, function (rs) { //获取行政区域
   var count = rs.boundaries.length; //行政区域的点有多少个
   for (var i = 0; i < count; i++) {
    var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#4A7300", fillColor: "#FFF8DC" }); //建立多边形覆盖物
    map.addOverlay(ply); //添加覆盖物
   }
  });
 }
</script>
效果如下：
 

百度地图API是由JavaScript语言编写的，在使用之前需要将API引用到页面中：  现在新版本的需要密钥，下面用的是旧版的

<script src="http://api.map.baidu.com/api?v=版本&services=true或者false" type="text/javascript"></script>

显示广州火车站简单实例：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>百度地图API的使用</title>
 <!-- 百度地图API-->
 <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
 <script type="text/javascript">
 function initialize() {
  //创建地图实例
  var map = new BMap.Map('map');
  //创建一个坐标
  var point =new BMap.Point(113.264641,23.154905);
  //地图初始化，设置中心点坐标和地图级别
  map.centerAndZoom(point,15);
 }
 window.onload = initialize;
 </script>
</head>
<body>
<!-- 百度地图地图容器-->
 <div id="map" style="width:500px;height:320px"></div>
</body>
</html>
 
地图上添加控件：

//添加控件

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

MapTypeControl ---------地图类型控件

CopyrightControl --------版权控件

ScaleControl       --------比例尺控件

NavigationControl  ------缩放控件

OverviewMapControl  ----缩略图控件

创建标注：

var marker = new BMap.Marker(point); 　　　　　 // 创建标注
map.addOverlay(marker);      // 将标注添加到地图中
 
创建信息窗口：
 
var infoWindow = new BMap.InfoWindow("I am here"); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point);     //开启信息窗口
 
分享结尾最后附上百度地图偏移量：

经度校正值： 0.008774687519;

纬度校正值： 0.00374531687912;

百度地图API使用方法详解的更多相关文章

  1. PHP外部调用网站百度统计数据的方法详解

    目的:外部调用网站的百度统计(tongji.baidu.com)数据. 条件:1.具备调用目标网站的百度统计平台管理权限 2.PHP环境支持curl函数. 原理:同PHP小偷程序原理,通过curl函数 ...

  2. 百度地图api描绘车辆历史轨迹图

    最近公司在做项目需需求:车辆定位后在地图显示历史轨迹的功能 一开始使用了google的地图api,但是发现会一直关闭,索性支持下国产,使用了百度地图api search方法把两个点连接成线后,会出现起 ...

  3. 百度地图API详解之事件机制，function“闭包”解决for循环和监听器冲突的问题：

    原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...

  4. [转]百度地图API详解之地图坐标系统

    博客原文地址:http://www.jiazhengblog.com/blog/2011/07/02/289/ 我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需 ...

  5. Android端百度地图API使用详解

    百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. 百度地图移动版A ...

  6. 【转载】Android端百度地图API使用详解

    转载地址:http://www.cnblogs.com/rocomp/p/4994110.html 百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口 ...

  7. 百度地图API详解之自定义地图类型

    http://blog.csdn.net/sup_heaven/article/details/8461586 今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种地图 ...

  8. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

  9. 百度地图API的使用方法

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

随机推荐

  1. struts2获取web元素(request、session、application)

    一.Action中获取 第一种方式: 通过ActionContext,这种方式取到的对象是Map类型 import java.util.Map; import com.opensymphony.xwo ...

  2. 如何用UE（UltraEdit）删除重复行？--转

    原文地址:https://www.zhengjie.com/question/bb148773 使用UE(UltraEdit)的高级排序功能就可以删除掉所有的重复行. 操作步骤 1.文件—排序(R)— ...

  3. 帮助文档的制作javadoc

    将自己写的工具类Tool的Tool.class文件发送给其他人,其他人只要将该文件设置到classpath路径下,就可以使用该工具类. 但是很遗憾,该类中到底定义了多少个方法,对方却不清楚,因为该类并 ...

  4. 20个漂亮 CSS3 按钮效果及优秀的制作教程

    在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...

  5. 《HelloGitHub月刊》第05期

    <HelloGitHub>第05期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 欢迎各路人士加入本项目,丰富月刊的内容,也可以直接在Issue(需要登录gi ...

  6. Azure ARM (10) ARM模式下的虚拟机和Classic Model虚拟机的区别

    <Windows Azure Platform 系列文章目录> 本文内容比较多,请大家仔细阅读,谢谢! 请读者注意,在Azure ARM平台,有两种虚拟机模式:经典虚拟机和ARM虚拟机 A ...

  7. java设计模式(三)--抽象工厂模式

    转载:http://zz563143188.iteye.com/blog/1847029 前面的工厂方法模式虽然清晰,但还是感觉有些繁琐,通常使用的还是抽象工厂模式. 工厂方法模式有一个问题就是,类的 ...

  8. 关于Entity Framework中的Attached报错的完美解决方案终极版

    之前发表过一篇文章题为<关于Entity Framework中的Attached报错的完美解决方案>,那篇文章确实能解决单个实体在进行更新.删除时Attached的报错,注意我这里说的单个 ...

  9. 前端自动化开发之grunt

    上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天 ...

  10. Web API配置自定义路由

    默认访问Web API时,是无需指定method名.它会按照默认的路由来访问.如果你的Web API中出现有方法重载时,也许得配置自定义路由: 标记1为自定义路由,标记2为默认路由,需要把自定义路由排 ...