百度地图API使用方法详解


Posted in PHP onAugust 25, 2015

最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图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使用方法详解

示例二:

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

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

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

百度地图API使用方法详解

<!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>

地图上添加控件:

百度地图API使用方法详解

//添加控件

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

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

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

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

NavigationControl  ------缩放控件

OverviewMapControl  ----缩略图控件

创建标注:

百度地图API使用方法详解

var marker = new BMap.Marker(point);   // 创建标注
map.addOverlay(marker);      // 将标注添加到地图中

创建信息窗口:

百度地图API使用方法详解

var infoWindow = new BMap.InfoWindow("I am here"); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point);     //开启信息窗口

百度地图偏移量:

经度校正值: 0.008774687519;

纬度校正值: 0.00374531687912;

PHP 相关文章推荐
php5 pdo新改动加载注意事项
Sep 11 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
May 23 PHP
PHP加Nginx实现动态裁剪图片方案
Mar 10 PHP
PHP的password_hash()使用实例
Mar 17 PHP
在Yii框架中使用PHP模板引擎Twig的例子
Jun 13 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
Sep 06 PHP
php中的mongodb select常用操作代码示例
Sep 06 PHP
php抽象类使用要点与注意事项分析
Feb 09 PHP
初识laravel5
Mar 02 PHP
在openSUSE42.1下编译安装PHP7 的方法
Dec 24 PHP
thinkPHP交易详情查询功能详解
Dec 02 PHP
PHP获取当前时间不准确问题解决方案
Aug 14 PHP
PHP实现生成唯一会员卡号
Aug 24 #PHP
PHP实现微信发红包程序
Aug 24 #PHP
php 利用socket发送HTTP请求(GET,POST)
Aug 24 #PHP
php实现递归的三种基本方式
Jul 04 #PHP
php析构函数的简单使用说明
Aug 24 #PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
Aug 23 #PHP
dvwa+xampp搭建显示乱码的问题及解决方案
Aug 23 #PHP
You might like
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
JavaScript面象对象设计
2008/04/28 Javascript
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
js自定义回调函数
2015/12/13 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
CNC数控操作工岗位职责
2013/11/19 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
森林防火宣传标语
2014/06/27 职场文书
大专生求职信
2014/06/29 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
会计求职简历自我评价
2015/03/10 职场文书
初婚未育证明样本
2015/06/18 职场文书
员工手册董事长致辞
2015/07/29 职场文书
用python自动生成日历
2021/04/24 Python
Golang生成Excel文档的方法步骤
2021/06/09 Golang
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
python双向链表实例详解
2022/05/25 Python
table不让td文字溢出操作方法
2022/12/24 HTML / CSS