在项目中使用百度地图，最直接的方式是使用百度api，但是使用百度api需要申请key，并且某些功能调用有次数限制。

本文讲述在openlayers3中使用百度地图的方法。调用百度地图，也是经过了几番周折

贴上显示代码，以免其他人调用百度地图走弯路。效果如下：

代码如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link rel="stylesheet" type="text/css" href="ol/ol3/css/ol.css" />

    <style type="text/css">

        body, #mainMap {

            border: 0px;

            margin: 0px;

            padding: 0px;

            width: 100%;

            height: 100%;

            font-size: 13px;

        }

    </style>

    <script type="text/javascript" src="ol/ol3/build/ol-debug.js"></script>

</head>

<body>

    <div id="mainMap">

    </div>

</body>

</html>

<script type="text/javascript">

    var projection = ol.proj.get("EPSG:3857");

    var resolutions = [];

    for (var i = 0; i < 19; i++) {

        resolutions[i] = Math.pow(2, 18 - i);

    }

    var tilegrid = new ol.tilegrid.TileGrid({

        origin: [0, 0],

        resolutions: resolutions

    });

    var baidu_source = new ol.source.TileImage({

        projection: projection,

        tileGrid: tilegrid,

        tileUrlFunction: function (tileCoord, pixelRatio, proj) {

            if (!tileCoord) {

                return "";

            }

            var z = tileCoord[0];

            var x = tileCoord[1];

            var y = tileCoord[2];

            if (x < 0) {

                x = "M" + (-x);

            }

            if (y < 0) {

                y = "M" + (-y);

            }

            return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";

        }

    });

    var baidu_layer = new ol.layer.Tile({

        source: baidu_source

    });

    var map = new ol.Map({

        target: 'mainMap',

        controls: ol.control.defaults().extend([

               new ol.control.MousePosition({ projection: 'EPSG:4326' })

        ]),

        layers: [baidu_layer],

        view: new ol.View({

            center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),

            zoom: 4

        })

    });

</script>

　　

openlayers3应用一：显示百度地图的更多相关文章

  1. 在iOS APP中使用H5显示百度地图时如何支持HTTPS？

    现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...

  2. Android 百度地图开发（一）--- 申请API Key和在项目中显示百度地图

      标签: Android百度地图API Key  分类: Android 百度地图开发(2)    最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地 ...

  3. C#显示百度地图API

    http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&2_0#2&0 太原市的经纬度:112.596, 37.884 北京市 ...

  4. 网页显示百度地图 Jquery

    cshtml: <div class="modal" style="visibility: hidden"> <div id="ma ...

  5. Android开发百度地图（一）--显示基本地图

    最近由于比赛的需要,自己学习了一下百度地图的开发.希望以下的内容能够对大家有用. 一.开发前的准备工作: 1.注册百度账号,并登录.(有百度账号的话直接登录) 2.申请Key,地址:http://de ...

  6. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  7. Angular/Vue调用百度地图+标注点不显示图标+多标注点计算地图中心位置

    整理一下~ 一.在vue中调用百度地图 首先当然是申请百度密匙(很简单,不多说) 1.在index.html文件中引入百度地图JavaScript API接口:   <script type=& ...

  8. android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图

    1.准备工作: 百度地图API是免费开放的,但是需要申请API Key: 1)先注册一个百度开发者帐号 2)进入百度开放服务平台http://developer.baidu.com/ 3)进入LBS云 ...

  9. Android发布apk后解决百度地图不显示的问题

    今天在做Android apk发布时,发现发布后不能显示百度地图,结合网上的信息,及自己的实验,终于可以了.原来在Eclipse上直接run的是测试版本,而发布后是运行版本,两个版本的SHA1值不一样 ...

随机推荐

  1. Javascript：面试经典套路-查重（reduce）

    今天在偶然间查看到了一段代码,代码使用了很短的篇幅完成了字符串统计相同字符次数这个经典面试题,其中用到了reduce这个方法,网上查了查,没有查到什么有价值的东西,导致浪费了我一些时间才看懂,现将我的 ...

  2. PHP流程管理，堪比小小程序

    这个流程管理是从用户登录界面开始,然后提交申请,页面逐级审核通过.这个做起来其实挺简单,只是在某些逻辑方面需要 好好考虑一下. 登录页面就不再多说了,如果要存session的话,我们可以建一个假的登录 ...

  3. laravel框架中所用到的依赖注入

    用Laravel开发前前后后有2个月左右了,之前一直写Java,就像找到Java和PHP之前的共同点,用Java的某些原理去理解PHP会发现还是有很多共通之处的.Java的依赖注入已经是一个很常见的概 ...

  4. Android中的Drawable和动画

    Android中Drawable是一种可以在Canvas上进行绘制抽象的概念,种类很多,常见的颜色和图片都可以是一个Drawable.Drawable有很多种,它们表示一种图像的概念,但是它们又不全是 ...

  5. 从编译安装Keepalived 到 配置 负载均衡（LVS-DR）

    最近在研究服务器高可用集群 (HA)…… Keepalived 是用C写的软路由.提供负载均衡与高可用特性. 负载均衡利用IPVS技术 高可用通过VRRP协议实现 更难能的贵的是,一直到最近还在更新 ...

  6. MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ...

    下面是我update数据库时打印出来的异常: ### Error updating database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSynt ...

  7. SUSE linux 使用LVM安装系统和管理

    引出 在我们安装好linux系统后会发现在需要修改磁盘分区的时候会比较困难,系统安装的/目录的文件系统要更改基本不太可能,其他目录如/home目录也比较困难.但是系统安装时要是采用的LVM管理的方式安 ...

  8. Servlet3.0新特性使用详解

    可插拔的Web框架 几乎所有基于Java的web框架都建立在servlet之上.现今大多数web框架要么通过servlet.要么通过Web.xml插入.利用标注(Annotation)来定义servl ...

  9. POPTEST老李分享修改dns ip的vbs代码

    POPTEST老李分享修改dns ip的vbs代码   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨 ...

  10. 老李分享：jvm结构简介 2

    2.2.4 Program counter regsiters:程序计数器 类似于PC寄存器,是一块较小的内存区域,通过程序计数器中的值寻找要执行的指令的字节码,由于多线程间切换时要恢复每一个线程的当 ...