调用一个地图（百度地图）API（定位） 到网站：

1.调用API的js :

<script type="text/javascript" src="https://api.map.baidu.com/api?type=subway&v=1.0&ak=2Xn5TnHUisrYpE8oy5OCAun8YkiGrbcy"></script>

2.设置地图容器的样式：

<style type="text/css">
#container{height:100%}
html,body,div{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
</style>
 
3.在在<body></body>中放置地图容器
<div id="container"></div>
 
4.在</body></html>中放置自己的js

 <script type="text/javascript">
/**

      * 从所有城市列表中获取北京信息

     * 结果格式

      * {

      *     keyword: 'beijing',

      *     name: '北京',

      *     citycode: '131'

      * }

      */

      /* globals BMapSub */

     var subwayCityName = '北京';

     var list = BMapSub.SubwayCitiesList;

     var subwaycity = null;

     for (var i = 0; i < list.length; i++) {
if (list[i].name === subwayCityName) {

             subwaycity = list[i];

             break;

         }

     }

     // 获取北京地铁数据-初始化地铁图

     var subway = new BMapSub.Subway('container', subwaycity.citycode);

     subway.setZoom(0.5);

 </script>

代码如下：
最终代码如下：
 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

 5 <title>地铁图展示</title>

 6 <script type="text/javascript" src="https://api.map.baidu.com/api?type=subway&v=1.0&ak=2Xn5TnHUisrYpE8oy5OCAun8YkiGrbcy"></script>

 7 <style type="text/css">

 8 #container{height:100%}

 9 html,body,div{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

42 </style>

43 </head>

44 <body>

60 <div id="container"></div>

61 <script type="text/javascript">

62     /**

63      * 从所有城市列表中获取北京信息

64      * 结果格式

65      * {

66      *     keyword: 'beijing',

67      *     name: '北京',

68      *     citycode: '131'

69      * }

70      */

71      /* globals BMapSub */

72     var subwayCityName = '北京';

73     var list = BMapSub.SubwayCitiesList;

74     var subwaycity = null;

75     for (var i = 0; i < list.length; i++) {

76         if (list[i].name === subwayCityName) {

77             subwaycity = list[i];

78             break;

79         }

80     }

81     // 获取北京地铁数据-初始化地铁图

82     var subway = new BMapSub.Subway('container', subwaycity.citycode);

83     subway.setZoom(0.5);

84 </script>

85 </body>

86 </html>

web 12的更多相关文章

  1. 《Using Python to Access Web Data》Week4 Programs that Surf the Web 课堂笔记

    Coursera课程<Using Python to Access Web Data> 密歇根大学 Week4 Programs that Surf the Web 12.3 Unicod ...

  2. 分享20款移动开发中很有用的 jQuery 插件

    今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...

  3. WCF入门教程二[WCF应用的通信过程]

    一.概述 WCF能够建立一个跨平台的安全.可信赖.事务性的解决方案,是一个WebService,.Net Remoting,Enterprise Service,WSE,MSMQ的并集,有一副很经典的 ...

  4. C#获取本机IP以及无线网ip

       1 private void GetIP()   2 { 3 string hostName = Dns.GetHostName();//本机名 4 //System.Net.IPAddress ...

  5. Heartbeat+DRBD+NFS 构建高可用的文件系统

    1.实验拓扑图 2.修改主机名 1 2 3 vim /etc/sysconfig/network vim /etc/hosts drbd1.free.com     drbd2.free.com 3. ...

  6. python 各模块

    01 关于本书 02 代码约定 03 关于例子 04 如何联系我们 1 核心模块 11 介绍 111 内建函数和异常 112 操作系统接口模块 113 类型支持模块 114 正则表达式 115 语言支 ...

  7. WCF入门教程系列二

    一.概述 WCF能够建立一个跨平台的安全.可信赖.事务性的解决方案,是一个WebService,.Net Remoting,Enterprise Service,WSE,MSMQ的并集,有一副很经典的 ...

  8. C#获取本机IP方法,获取本机局域网IP地址方法

    1. private void GetIP() { string hostName = Dns.GetHostName();//本机名 //System.Net.IPAddress[] address ...

  9. WCF通信过程

    无废话WCF入门教程二[WCF应用的通信过程] 一.概述 WCF能够建立一个跨平台的安全.可信赖.事务性的解决方案,是一个WebService,.Net Remoting,Enterprise Ser ...

随机推荐

  1. Java基础 -- String，StringBuilder，StringBuffer三者的区别

    结论 1-String,StringBuilder,StringBuffer 之间的区别主要是在两个方面,即运行速度和线程安全这两方面: 首先说运行速度,或者说是执行速度,在这方面运行速度快慢为:St ...

  2. 项目Alpha冲刺（团队）-代码规范、冲刺任务与计划

    课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(团队)-代码规范.冲刺任务与计划 团队名称:SkyReach 作业目标:确定团队项目的代码规范.冲刺任务与计划 代码规范:隐流 ...

  3. 机器学习基石7-The VC Dimension

    注: 文章中所有的图片均来自台湾大学林轩田<机器学习基石>课程. 笔记原作者:红色石头 微信公众号:AI有道 前几节课着重介绍了机器能够学习的条件并做了详细的推导和解释.机器能够学习必须满 ...

  4. matlab读取图片的异常表现

    在对人脸图片进行对齐时,发现有两张人脸图片一直检测不到人脸,但这两张图片中的人脸明明很好检测(证件照),经过 排查,最终发现问题所在:图片的格式不对. img = imread("**.jp ...

  5. 小米众筹新品---8H凉感慢回弹记忆绵枕 99元 上手开箱图

    在众目睽睽之下,商城终于成了杂货铺 众筹发布了第98期新品——8H凉感慢回弹记忆绵枕H1,售价为99元,主打舒适凉感,抗菌吸湿,三曲线护颈设计,3~5秒慢回弹. 本着程序员的读书历程:x 语言入门 — ...

  6. Revit二次开发 推荐

    学习revit二次开发,建议还是先把revit熟悉一下,去建立一下模型,亲自感受一下是如何创建模型的流程,其中会遇到什么问题.这样在自己做二次开发的时候,一些问题自己就能提前想到,规避掉.我大概用了半 ...

  7. sql 随笔更新

    SELECT DISTINCT(p.`id`), p.`id` , v.`full_name` , CONCAT(LEFT(v.mobile, 7), '****') , DATE_FORMAT(DA ...

  8. Linux 常用命令介绍

    介绍常用命令,在忘记时便于即使查询 复制.移动.删除     cp.mv.rm.pwd 1. CP 介绍 用法:CP [-adfilprsu]  源文件  目标文件 参数:参数说明: -a:是指arc ...

  9. nginx windows could not build server_names_hash, you should increase server_names_hash_bucket_size: 32

    nginx 为windows版本 在配置文件nginx.conf 的http{}段增加一行配置 server_names_hash_bucket_size 64; 如果64不够可以设128等

  10. 关于 gitignore

    前言 通过在一个 gitignore 文件里面添加相关的规则,我们可以让 git 在追踪文件时忽略一些特定的文件(gitignore 文件泛指所有存放忽略规则的文件,不仅仅是指 .gitignore ...