调用一个地图(百度地图)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>

12 week blog的更多相关文章

  1. 安装mysql8.0.12

    安装mysql8.0.12 https://blog.csdn.net/zwj1030711290/article/details/80039780 问题1:忘记记录日志打印的密码就把窗口给关了 解决 ...

  2. 使用kubeadm安装Kubernetes 1.12

    使用kubeadm安装Kubernetes 1.12 https://blog.frognew.com/2018/10/kubeadm-install-kubernetes-1.12.html 测试环 ...

  3. Citrix ADC 12.1 / NetScaler 12

    Citrix ADC 12.1 / NetScaler 12 参考 https://www.carlstalhood.com/netscaler-menu/netscaler-12/ Core – C ...

  4. 参数*args和**args区别

    #*args(元组)和**args(字典)的区别 def tuple_test(*args): for i in args: print 'hello'+i s=('xuexi','mili') tu ...

  5. django复习笔记2:models

    关于models,主要想说的是django shell以及生成测试数据的脚本这两部分. 一个models中的类相当于数据库的一张表,先看一个设置了外键的models. from django.db i ...

  6. Django1.9开发博客(7)- 实现功能

    到目前为止我们已经完成了一个django应用的所有基础部分. 包括url配置.视图.模型和模板.接下来开始继续完善我们的博客系统了. 首先我们需要一个显示每篇文章的详细页面,对不? 文章详情 对于首页 ...

  7. [置顶] [VS2010]逸雨清风 永久稳定音乐外链生成软件V0.1

    音乐外链说明:现在的很多网站都有用到外链,特别是音乐外链,在博客.空间里设作背景音乐.网上也有很多上传外链的网站,不过都不稳定而且有容量限制,而且似乎所有网站其实都是用的同一个源码组件,都是链接到Ra ...

  8. mybatis3温故

    MyBatis可以利用SQL映射文件来配置,也可以利用Annotation来设置.MyBatis提供的一些基本注解如下表所示. 注解 目标 相应的XML 描述 @CacheNamespace 类 &l ...

  9. C++笔试题库-------Coding整理

    1. 反转字符串 char* strrev1(const char* str) { int len = strlen(str); ]; char *p = temp + len; *p = '\0'; ...

随机推荐

  1. ArcGIS Engine 10.x许可代码

    相比9.3,10.x许可代码的书写改变了,ArcObjects SDK 10 Microsoft .NET Framework 帮助文档中,提供了以下两种方式: 1. Calling RuntimeM ...

  2. BZOJ3622 已经没有什么好害怕的了 动态规划 容斥原理 组合数学

    原文链接https://www.cnblogs.com/zhouzhendong/p/9276479.html 题目传送门 - BZOJ3622 题意 给定两个序列 $a,b$ ,各包含 $n$ 个数 ...

  3. day9文件操作---从即日起时景丽阳老师给我们讲课

    今天的主要内容是文件的操作,读,写,只读只写,或者可读同时可写,追加写,以二进制的方式读,以二进制的方式写,以二进制的方式追加. 思维导图: 给你一个文件路径,从中找出所有的文件,方法如下: # 方法 ...

  4. Linux下java开发环境配置总结

    1 安装JDK,卸载以前的jdk,安装jdk1.8 : 参考:http://www.jb51.net/os/RedHat/73016.html 需要注意配置环境变量中的路径要和当前安装的jdk路径一致 ...

  5. 轻松3步设置sublime text2/sublime text3的预览浏览器

    转https://www.cnblogs.com/swii/p/5888494.html 1,打开sublime 依次选择 tools > build system > new build ...

  6. JetBrain(Pycharm,Clion...)的使用优化

    我们知道,在JetBrain系列软件中,另起一行继续编辑的快捷是Shift+Enter,这样即使指针没有到达当前行结尾,也可以另起一行,如图1中的情况:    >>>  Shift+ ...

  7. hdu3944

    hdu3944题目中给出的杨辉三角形的形状带有误导目的,应该转化成对称的形状再去思考这个问题分两种情况第一个是在左区从目标位置向左上方走一直走到边界,然后再向右上方一直走到起点n-k个1加上C(n-k ...

  8. datatables跳转自定义页面(后端分页)

    在后端分页的情况下,怎么做到跳转自定义页面? 0x01 难点: 一. 怎么添加自定义代码? 前提:datatables在整个html加载完毕后,进行datatables数据的渲染,并且把右下角的 “上 ...

  9. linux 命令基础一。

    UNIX是什么 UNIX的定义: UNIX是一个计算机操作系统,一个用来协调.管理和控制计算机硬件和软件资源的控制程序. UNIX操作系统的特点:多用户和多任务多用户表示在同一时刻可以有多个用户同时使 ...

  10. Xamarin Essentials教程地理定位Geolocation

    Xamarin Essentials教程地理定位Geolocation   通过地理定位功能,应用程序可以获取用户的当前地理位置,如经纬度值.利用地理位置,可以在地图上定位,也可以转化物理位置,划分用 ...