百度地图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 相关文章推荐
JAVA/JSP学习系列之四
Oct 09 PHP
php记录日志的实现代码
Aug 08 PHP
php批量删除数据库下指定前缀的表以prefix_为例
Aug 24 PHP
php中的观察者模式简单实例
Jan 20 PHP
PHP中SSO Cookie登录分析和实现
Nov 06 PHP
PHP正则获取页面所有图片地址
Mar 23 PHP
Yii2 RESTful中api的使用及开发实例详解
Jul 06 PHP
php使用include 和require引入文件的区别
Feb 16 PHP
Yii2 批量插入、更新数据实例
Mar 15 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
Aug 29 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
Dec 21 PHP
php微信公众号开发之答题连闯三关
Oct 20 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读注册表
2006/10/09 PHP
什么是MVC,好东西啊
2007/05/03 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
Python开发编码规范
2006/09/08 Python
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python学习基础之循环import及import过程
2018/04/22 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python使用贪婪算法解决问题
2019/10/22 Python
keras slice layer 层实现方式
2020/06/11 Python
用python对oracle进行简单性能测试
2020/12/05 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
会计毕业自我鉴定
2014/02/05 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
市场开发计划书
2014/05/07 职场文书
董事长秘书工作职责
2014/06/10 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS