12 week blog

時間 2019-11-15

標籤 week blog 简体版

原文原文鏈接

調用一個地圖（百度地圖）API（定位）到網站：javascript

1.調用API的js :css

2.設置地圖容器的樣式：java

#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>

1. 11 week blog
2. week 10 blog
3. 7th week blog
4. 9th Week blog
5. 8th week blog
6. 10th Week Blog 2 Constructor
7. 7th week blog（DOM&BOM）
8. The week in .NET - 1/12/2015
9. 2019.3.22 Week 12 : ZigBee and T/H chamber test
10. Milvus 社區週報- Week 12, 2020
更多相關文章...
• MySQL DATE_ADD() 函數 - SQL 教程
• PHP date_isodate_set() 函數 - PHP參考手冊
• YAML 入門教程
• Java 8 Stream 教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。