百度地图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 相关文章推荐
PHP生成Flash动画的实现代码
Mar 12 PHP
PHP初学者最感迷茫的问题小结
Mar 27 PHP
php的大小写敏感问题整理
Dec 29 PHP
zf框架的Filter过滤器使用示例
Mar 13 PHP
PHP学习笔记之字符串编码的转换和判断
May 22 PHP
深入理解PHP内核(二)之SAPI探究
Nov 10 PHP
Symfony2联合查询实现方法
Mar 18 PHP
php实现的二分查找算法示例
Jun 20 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
Nov 17 PHP
Laravel利用gulp如何构建前端资源详解
Jun 03 PHP
PHP如何搭建百度Ueditor富文本编辑器
Sep 21 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
Oct 24 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 数字左侧自动补0
2008/03/31 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php验证session无效的解决方法
2014/11/04 PHP
php关联数组快速排序的方法
2015/04/17 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
python实现数通设备端口监控示例
2014/04/02 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
校园门卫岗位职责
2013/12/09 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
婚礼主持结束词
2014/03/13 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书