看到 MapV 的一个demo 的底图比较好看，练练手

MapV demos：https://mapv.baidu.com/examples/

参考的demo：https://mapv.baidu.com/examples/#baidu-map-polyline-time.html

需要注册一个百度地图密钥：http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey   免费的 注册很简单

需要的 js 包都换成在线的，另外直接使用 demo 的源码会报错，原因未找到，后来参考百度地图api帮助文档的  异步加载 demo 走通了。

代码如下：  只需要修改其中的  “您的百度地图ak”   ，新建  xxx.html 文件，将代码粘贴进去，保存，双击浏览器打开就行。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.  
  7.     <style type="text/css">
  8.         html, body {
  9.             width: 100%;
  10.             height: 100%;
  11.             margin: 0;
  12.             padding: 0;
  13.             overflow: hidden;
  14.         }
  15.  
  16.         #map {
  17.             width: 100%;
  18.             height: 100%;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.  
  24.     <div id="map"></div>
  25.     <canvas id="canvas"></canvas>
  26.  
  27.     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  28.     <script src="http://mapv.baidu.com/build/mapv.min.js"></script>
  29.  
  30.     <script type="text/javascript">
  31.     function loadScript() {
  32.       var script = document.createElement("script");
  33.       script.src = "http://api.map.baidu.com/api?v=2.0&ak="您的百度地图ak"&callback=initialize";
  34.       document.body.appendChild(script);  
  35.  
  36.     }
  37.     window.onload = loadScript;
  38.     function initialize() {
  39.       // 百度地图API功能
  40.         var map = new BMap.Map("map", {
  41.             enableMapClick: false
  42.         });    // 创建Map实例
  43.         map.centerAndZoom(new BMap.Point(114.321317, 30.598428), 12);  // 初始化地图,设置中心点坐标和地图级别
  44.         map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
  45.  
  46.         // 地图自定义样式
  47.         map.setMapStyle({
  48.             styleJson: [{
  49.                 "featureType": "water",
  50.                 "elementType": "all",
  51.                 "stylers": {
  52.                     "color": "#044161"
  53.                 }
  54.             }, {
  55.                 "featureType": "land",
  56.                 "elementType": "all",
  57.                 "stylers": {
  58.                     "color": "#091934"
  59.                 }
  60.             }, {
  61.                 "featureType": "boundary",
  62.                 "elementType": "geometry",
  63.                 "stylers": {
  64.                     "visibility": "off"
  65.                 }
  66.             }, {
  67.                 "featureType": "railway",
  68.                 "elementType": "all",
  69.                 "stylers": {
  70.                     "visibility": "off"
  71.                 }
  72.             }, {
  73.                 "featureType": "highway",
  74.                 "elementType": "geometry",
  75.                 "stylers": {
  76.                     "color": "#004981"
  77.                 }
  78.             }, {
  79.                 "featureType": "highway",
  80.                 "elementType": "geometry.fill",
  81.                 "stylers": {
  82.                     "color": "#005b96",
  83.                     "lightness": 1
  84.                 }
  85.             }, {
  86.                 "featureType": "highway",
  87.                 "elementType": "labels",
  88.                 "stylers": {
  89.                     "visibility": "on"
  90.                 }
  91.             }, {
  92.                 "featureType": "arterial",
  93.                 "elementType": "geometry",
  94.                 "stylers": {
  95.                     "color": "#004981",
  96.                     "lightness": -39
  97.                 }
  98.             }, {
  99.                 "featureType": "arterial",
  100.                 "elementType": "geometry.fill",
  101.                 "stylers": {
  102.                     "color": "#00508b"
  103.                 }
  104.             }, {
  105.                 "featureType": "poi",
  106.                 "elementType": "all",
  107.                 "stylers": {
  108.                     "visibility": "off"
  109.                 }
  110.             }, {
  111.                 "featureType": "green",
  112.                 "elementType": "all",
  113.                 "stylers": {
  114.                     "color": "#056197",
  115.                     "visibility": "off"
  116.                 }
  117.             }, {
  118.                 "featureType": "subway",
  119.                 "elementType": "all",
  120.                 "stylers": {
  121.                     "visibility": "off"
  122.                 }
  123.             }, {
  124.                 "featureType": "manmade",
  125.                 "elementType": "all",
  126.                 "stylers": {
  127.                     "visibility": "off"
  128.                 }
  129.             }, {
  130.                 "featureType": "local",
  131.                 "elementType": "all",
  132.                 "stylers": {
  133.                     "visibility": "off"
  134.                 }
  135.             }, {
  136.                 "featureType": "arterial",
  137.                 "elementType": "labels",
  138.                 "stylers": {
  139.                     "visibility": "off"
  140.                 }
  141.             }, {
  142.                 "featureType": "boundary",
  143.                 "elementType": "geometry.fill",
  144.                 "stylers": {
  145.                     "visibility": "off"
  146.                 }
  147.             }, {
  148.                 "featureType": "building",
  149.                 "elementType": "all",
  150.                 "stylers": {
  151.                     "color": "#1a5787"
  152.                 }
  153.             }, {
  154.                 "featureType": "label",
  155.                 "elementType": "all",
  156.                 "stylers": {
  157.                     "visibility": "off"
  158.                 }
  159.             }, {
  160.                 "featureType": "poi",
  161.                 "elementType": "labels.text.fill",
  162.                 "stylers": {
  163.                     "color": "#ffffff"
  164.                 }
  165.             }, {
  166.                 "featureType": "poi",
  167.                 "elementType": "labels.text.stroke",
  168.                 "stylers": {
  169.                     "color": "#1e1c1c"
  170.                 }
  171.             }, {
  172.                 "featureType": "administrative",
  173.                 "elementType": "labels",
  174.                 "stylers": {
  175.                     "visibility": "off"
  176.                 }
  177.             },{
  178.                 "featureType": "road",
  179.                 "elementType": "labels",
  180.                 "stylers": {
  181.                     "visibility": "off"
  182.                 }
  183.             }]
  184.         });
  185.  
  186.     }  
  187.  
  188.         </script>
  189.  
  190. </body>
  191. </html>

效果：

baiduMap & MapV 简单demo的更多相关文章

  1. 设计模式之单例模式的简单demo

    /* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...

  2. Spring的简单demo

    ---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...

  3. 使用Spring缓存的简单Demo

    使用Spring缓存的简单Demo 1. 首先创建Maven工程,在Pom中配置 <dependency> <groupId>org.springframework</g ...

  4. Managed DirectX中的DirectShow应用（简单Demo及源码)

    阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...

  5. angular实现了一个简单demo，angular-weibo-favorites

    前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...

  6. Solr配置与简单Demo[转]

    Solr配置与简单Demo 简介: solr是基于Lucene Java搜索库的企业级全文搜索引擎,目前是apache的一个项目.它的官方网址在http://lucene.apache.org/sol ...

  7. 二维码简单Demo

    二维码简单Demo 一.视图 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name=&qu ...

  8. android JNI 简单demo（2）它JNI demo 写

    android JNI 简单demo(2)它JNI demo 写 一.搭建Cygwin 环境:http://blog.csdn.net/androidolblog/article/details/25 ...

  9. Ext简单demo示例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. matplotlib中的plt.ion()和plt.ioff()函数

    转自https://blog.csdn.net/yzy__zju/article/details/85008603 Matplotlib的显示模式默认为阻塞(block)模式,因此若想动态显示图像,则 ...

  2. codeforces 1017C - Cloud Computing 权值线段树 差分 贪心

    https://codeforces.com/problemset/problem/1070/C 题意: 有很多活动,每个活动可以在天数为$[l,r]$时,提供$C$个价格为$P$的商品 现在从第一天 ...

  3. 二阶环路滤波器的matlab 设计

    clc; Rs=10*10^6; %码速率 es=0.707; %阻尼系数 fs=8*10^6; %采样频率.系统时钟频率 Bit_Loop_out=27;%环路滤波器输入输出位宽 N=31; %NC ...

  4. 阿里云各Linux发行版netcore兼容性评估报告---来自大石头的测试

    阿里云各Linux发行版netcore兼容性评估报告---来自大石头的测试 结论:    优先选择CentOS/Ubuntu,可选AliyunLinux(CentOS修改版)              ...

  5. [转] Vue + Webpack 组件式开发(练习环境)

    前言 研究了下别人的 vue 多页面框架, 都是直接复制 package.json 文件,然后在本地 npm install 一下即可, 或者使用官网 vue-cli 工具生成一个项目, 觉得这样虽然 ...

  6. PHP 闭包函数

    PHP>v5.3闭包函数,闭包函数没有函数名称,直接在function()传入变量即可 使用时将定义的变量当作函数来处理 匿名函数也叫闭包函数(closures允许创建一个没有指定没成的函数,最 ...

  7. 002 python准备做题的一些准备

    在这里,刷刷题,然后,将比较有用的连接粘贴一下在这里.

  8. 利用kibana插件对Elasticsearch进行批量操作

    #############批量获取################# #获取所有数据 GET _mget { "docs": [ {"_index":" ...

  9. Windows的四类消息

    Windows的三类消息1.标准消息宏名称 对映消息 消息处理函数(名称已由系统预设)ON_WM_CHAR WM_CAHR OnCharON_WM_CLOSE WM_CLOSE OnCloseON_W ...

  10. python 3 爬取某小说网站小说，注释详细

    目标:每一个小说保存成一个txt文件 思路:获取每个小说地址(图一),进入后获取每章节地址(图二),然后进入获取该章节内容(图三)保存文件中.循环 效果图: 每一行都有注释,不多解释了 import ...