在项目中使用百度地图，最直接的方式是使用百度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. oracle 11g centos6 安装

    选型:32位的内存是个瓶颈,已经是64位的时代了.使用64位的CentOS6 和 64位的Oracle 11g R2在虚拟机器安装,采用hostonly方式设置网络注意:能上网的网卡要设置一下ICS( ...

  2. Android中的ScrollTo和ScrollBy解析

    关于Android中的ScrollBy和ScrollTo方法相信大家并不陌生,这两个方法是在View中实现的.所以在各个继承了View的类都可以使用改方法. 在View中对这两个方法的源码编写是这样的 ...

  3. linux shell 找端口号及对应的进程

    #!/bin/bash#author:zhongyulin#crteate-time:2016-10-20 netstat -lnpt|grep -v grep>/tmp/script/nets ...

  4. mac开发环境配置

    折腾了好几天了,终于安装一部分了,mac装的win10,太占空间了,看到学习资源使用的工具,自己搜了一下安装了,在学习使用git的时候,都说mac比win好用多了,我tm为啥抱着mac装win费劲呢! ...

  5. 【前端调试手机页面】分享一款便捷的调试工具--spy-debugger

    spy-debugger  :  微信调试,各种WebView样式调试.手机浏览器的页面真机调试.便捷的远程调试手机页面.抓包工具,支持:HTTP/HTTPS,无需USB连接设备. github地址: ...

  6. javascript与jQuery选项卡效果

    HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...

  7. [C++]STL容器Vector的内存释放

    直接抛出两句话,说明到底应该如何释放Vector占用的内存. “vector的clear不影响capacity,你应该swap一个空的vector.” <Effective STL>中的“ ...

  8. as3中去掉字符串两边的空格，换行符

     as3 去掉字符串两边的空格,换行符,方法一  ActionScript Code  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20   pub ...

  9. 用webpack搭建react开发环境

    安装插件: npm install react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 配置w ...

  10. 老李秘技：LoadRunner支持参数文件极限是多大

    老李秘技:LoadRunner支持参数文件极限是多大   Controller不支持参数文件大于20m