在项目中使用百度地图，最直接的方式是使用百度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. setDefaultCloseOperation()参数得使用说明

    System.exit(0)是退出整个程序,如果有多个窗口,全部都销毁退出.setDefaultCloseOperation()是设置用户在此窗体上发起 "close" 时默认执行 ...

  2. (2)java中的集中关系，is a, has a, 继承，重点聊聊继承

    java中常见的类关系(javacore上面也有介绍道的) 1.is a关系() 2.has a 整体与局部的关系 3.继承关系 是现实世界中存在而上面两种关系又无法描述的 当然谈的最多的是继承关系, ...

  3. Win10上编译CoreCLR的Windows和Linux版本

    一.编译环境 首先,不管是Windows还是Linux版本CoreCLR的编译,都是在Windows10上进行的. 二.CoreCLR for Windows 在Windows上做编译怎么能少得了Vi ...

  4. eclipse 中 Servlet 模板代码（其实是代码提示模板）

    说的是模板代码,应该说的是提示的模板代码,并不是一新建就会出现模板. 第一步:先建一个Servlet文件,写好自己想要的模板 我的模板如下: 全选并复制,等会要粘贴到Servlet的提示模板中. pa ...

  5. iOS开发之应用沙盒

    1.应用沙盒概述 每个iOS应用都有自己的应用沙盒(应用沙盒就是文件系统目录),与其他文件系统隔离.应用必须待在自己的沙盒里,其他应用不能访问该沙盒. 应用沙盒的文件系统目录,如下图所示(假设应用的名 ...

  6. ASP.NET MVC制作404跳转（非302和200）

    前言:距离上次发文已经有几个月了! 这段时间李,制作了一个博客网站,现将博客文章选一些发表到博客园,顺便为自己网站打一下广告! 产生404的原因主要有以下: 1.浏览器和爬虫:某些浏览器会请求网站的f ...

  7. 通用数据库帮助类DBHelper(含log日志信息实时记录)

    项目需要,需要一个通用的数据库操作类,增删改查.事务.存储过程.日志记录都要有,于是在已有的帮助类上做了一些改进,并将log4j的.NET版--log4net嵌入其中记录sql的执行环境和状态. 用起 ...

  8. oracle server config

    安装oracle数据库软件 database/runInstaller; ##执行该程序开始安装 创建数据库 在oracle用户的图形界面oracle用户中 新开启一个终端,直接输入命令dbca会弹出 ...

  9. java.sql.SQLException: Value '0000-00-00 00:00:00' can not be represented as java.sql.Timestamp

    下面是我查询数据库时打印出来的异常信息: ### Error querying database.  Cause: java.sql.SQLException: Value '0000-00-00 0 ...

  10. 传输层TCP协议

    目录 首部格式数据单位特定注意自动重传请求ARQ具体实现发送缓存接收缓存滑动窗口确认丢失和确认迟到超时重传时间选择报文段的发送时机运输连接发送TCP请求客户端拥塞处理相关概念避免拥塞具体实现TCP 的 ...