百度地图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 相关文章推荐
多数据表共用一个页的新闻发布
Oct 09 PHP
PHP脚本的10个技巧(2)
Oct 09 PHP
php中对xml读取的相关函数的介绍一
Jun 05 PHP
PHPExcel读取Excel文件的实现代码
Dec 06 PHP
PHP防止post重复提交数据的简单例子
Jun 07 PHP
PHP Streams(流)详细介绍及使用
May 12 PHP
PHP制作用户注册系统
Oct 23 PHP
Laravel5.* 打印出执行的sql语句的方法
Jul 24 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
Feb 07 PHP
php和asp语法上的区别总结
May 12 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
May 29 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
Apr 23 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版(1)
2006/10/09 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
JS实现手风琴特效
2020/11/08 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
企业总经理任命书
2014/06/05 职场文书
体育节口号
2014/06/19 职场文书
英文感谢信格式
2015/01/21 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
单位工资证明范本
2015/06/12 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python