最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图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. 百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:

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

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

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

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

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

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

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

  5. 【百度地图API】手机浏览器抓包工具及其使用方法

    原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. -- ...

  6. 【百度地图API】百度API卫星图使用方法和卫星图对比工具

    原文:[百度地图API]百度API卫星图使用方法和卫星图对比工具 百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度 ...

  7. 【百度地图API】当地址解析失败时,如何调用search方法查找地址

    原文:[百度地图API]当地址解析失败时,如何调用search方法查找地址 有个朋友问我,当地址解析失败时,应该如何处理呢?比如,他想搜索“南宁市青秀区”. --------------------- ...

  8. 【百度地图API】JS版本的常见问题

    1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...

  9. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

随机推荐

  1. [LeetCode] Remove Duplicates from Sorted List 移除有序链表中的重复项

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  2. wpf ListBox删除

    绑定一个GUID对象 重绑定的数组中移除改对象,重新绑定.

  3. jsf初学数据表(DataTable)的绑定

    来看看简单的datatable例子: faces: <h:form> <h:dataTable value="#{tableData.names}" var=&q ...

  4. Android开发学习笔记--给一个按钮定义事件

    学习Android的第一天,了解了各种布局,然后自己动手画出了一个按钮,然后给按钮定义了一个事件是弹出一条消息显示“我成功了!”字样,具体过程如下: 1.修改布局文件activity_main.xml ...

  5. HDU 4435 charge-station () bfs图论问题

    E - charge-station Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u ...

  6. jmeter if 控制器

    判断变量值是不是为空(有没有被赋值): "${jd_aid}"!="\${jd_aid}"

  7. Java设计模式系列之责任链模式

    责任链模式 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求的客户端并不知道 ...

  8. ZOJ 2392 The Counting Problem(模拟)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1368 题目大意:计算从S到T中所有的数,其中0,1,2,3,4,5, ...

  9. C#读取Exeal文件

    今天写一个读取Exeal的时候遇到一个问题就是引用了Mircosotf.Office.Interop.Exeal类库的时候没有办法读取到 纠结了好久百度了一下发现别人是这样写的using Exeal= ...

  10. Java-hibernate的Hello World

     hibernate 是对jdbc进行轻量级封装的  orm 框架,充当项目的持久层. 要使用 hibernate首先就需要继续配置, 引包:下载hibernate然后加入jar包 同时引入mysql ...