web 12-CSDN博客

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

1.调用API的js :

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

#container{height:100%}

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

</style>

3.在在<body></body>中放置地图容器

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>

转载于:https://www.cnblogs.com/hjsn-101ycy/p/10289682.html