在项目中使用百度地图，最直接的方式是使用百度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. Asp.net web api 知多少

    本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...

  2. Json 与GeoJson

    1.JSON介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后 ...

  3. windows下的python flask环境搭建

    在Windows中搭建flask框架分为如下几步 1. 下载ez_setup.py文件,然后在cmd中执行 链接:http://pan.baidu.com/s/1qXOSeHu 密码:jkbw pyt ...

  4. CUDA随机数生成库curand——deviceAPI

    原创作品,如要转载请注明出处:http://www.cnblogs.com/shrimp-can/p/6590152.html 最近要在device函数中使用curand库生成随机数,查找了下资料,除 ...

  5. jsp中的动作标签

    和html标签一样,使用尖括号'<>'包裹起来. 用于在jsp页面中处理业务逻辑,避免在jsp中过多的使用java脚本. <jsp:forward>用于请求转发,它与Reque ...

  6. vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用（接入了聊天机器人，能够进行正常对话）

    使用Vue2进行的仿手机QQ的webapp的制作,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com ...

  7. HTTP协议（三）

    一.首先我们画一个图来看一下HTTP协议: 难道方法只有POST GET吗?NO,还有一些少用的方法. 二.请求方法有哪些? GET POST HEADER PUT TRACE DELETE OPTI ...

  8. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  9. js的基本介绍

    一:JavaScript简称js 他是个脚本语言,需要有宿主文件,他的宿主文件是html文件. 二:js的用法 js :1)进行数据运算 2) 控制浏览器的一些功能 3)控制元素 +元素 +样式 +内 ...

  10. 【转】AS3操作XML，增加、删除、修改

    var i:Number=0;//用于下面循环 var webcontent:String="Sontin's Blog <b>Welcome to 终吾一生</b> ...