html通过调用百度js api接口绘制杭州地铁线路图
时间: 2023-11-25 18:06:18 浏览: 42
首先，需要在 HTML 文件中引入百度地图 JS API 的链接：
```html
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
```
其中，`v=2.0` 表示使用版本号为 2.0 的 API，`ak=您的密钥` 表示需要使用自己申请的百度地图 API 密钥。
接下来，可以在 HTML 文件中添加一个容器元素，用于显示地图：
```html
<div id="map"></div>
```
然后，在 JavaScript 中通过百度地图 JS API 创建地图对象并显示在容器元素中：
```javascript
var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(120.153576, 30.287459); // 创建地图中心点
map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和缩放级别
```
接下来，需要获取杭州地铁线路数据，并按照百度地图 JS API 的要求将线路数据转换为百度地图可识别的格式。这里假设已经获取到了线路数据，并将其保存在一个名为 `subwayData` 的 JavaScript 对象中。
```javascript
// 定义地铁线路颜色
var lineColors = {
"1号线": "#FF0000",
"2号线": "#00FF00",
"4号线": "#FF00FF",
"5号线": "#0000FF",
"6号线": "#FFFF00"
};
// 将地铁线路数据转换为百度地图可识别的格式
var subwayPoints = [];
var subwayLines = [];
for (var lineName in subwayData) {
var lineData = subwayData[lineName];
var linePoints = [];
for (var i = 0; i < lineData.length; i++) {
var pointData = lineData[i];
var point = new BMap.Point(pointData.lng, pointData.lat);
linePoints.push(point);
subwayPoints.push(point);
}
var polyline = new BMap.Polyline(linePoints, {
strokeColor: lineColors[lineName],
strokeWeight: 6,
strokeOpacity: 0.8
});
subwayLines.push(polyline);
}
```
最后，将地铁线路数据添加到地图上即可：
```javascript
map.addOverlay(subwayLines); // 添加地铁线路
map.setViewport(subwayPoints); // 自适应地图视野
```
完整的代码示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>杭州地铁线路图</title>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 100%;
}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
</head>
<body>
<div id="map"></div>
<script>
var subwayData = {
"1号线": [
{"lng": 120.189011, "lat": 30.186655},
{"lng": 120.178986, "lat": 30.18202},
{"lng": 120.170105, "lat": 30.178631},
{"lng": 120.16142, "lat": 30.175564},
{"lng": 120.153576, "lat": 30.17315},
{"lng": 120.146272, "lat": 30.171548},
{"lng": 120.139397, "lat": 30.172142},
{"lng": 120.132279, "lat": 30.174277},
{"lng": 120.125628, "lat": 30.177571},
{"lng": 120.118226, "lat": 30.180638},
{"lng": 120.110086, "lat": 30.183068},
{"lng": 120.102722, "lat": 30.18643},
{"lng": 120.093781, "lat": 30.190493},
{"lng": 120.086014, "lat": 30.193243},
{"lng": 120.077883, "lat": 30.197134},
{"lng": 120.070256, "lat": 30.201075},
{"lng": 120.062231, "lat": 30.20494},
{"lng": 120.05386, "lat": 30.208484},
{"lng": 120.045758, "lat": 30.211768},
{"lng": 120.037856, "lat": 30.215186},
{"lng": 120.030256, "lat": 30.218788},
{"lng": 120.022982, "lat": 30.222474},
{"lng": 120.015656, "lat": 30.226163},
{"lng": 120.00785, "lat": 30.229708},
{"lng": 120.00016, "lat": 30.2337},
{"lng": 119.992527, "lat": 30.236928},
{"lng": 119.984861, "lat": 30.240121},
{"lng": 119.977994, "lat": 30.243122},
{"lng": 119.970496, "lat": 30.246115},
{"lng": 119.963174, "lat": 30.249312},
{"lng": 119.956184, "lat": 30.252452},
{"lng": 119.948804, "lat": 30.255406},
{"lng": 119.941122, "lat": 30.257804},
{"lng": 119.933036, "lat": 30.259713},
{"lng": 119.924804, "lat": 30.260955},
{"lng": 119.916561, "lat": 30.261667},
{"lng": 119.908283, "lat": 30.262436},
{"lng": 119.901032, "lat": 30.263262},
{"lng": 119.892869, "lat": 30.264087},
{"lng": 119.883354, "lat": 30.264461},
{"lng": 119.8755, "lat": 30.264672},
{"lng": 119.869288, "lat": 30.26479},
{"lng": 119.859584, "lat": 30.26498},
{"lng": 119.853338, "lat": 30.265127},
{"lng": 119.845549, "lat": 30.265322},
{"lng": 119.837597, "lat": 30.265525},
{"lng": 119.829685, "lat": 30.265715},
{"lng": 119.82157, "lat": 30.265925},
{"lng": 119.81508, "lat": 30.266078},
{"lng": 119.807326, "lat": 30.266266},
{"lng": 119.799915, "lat": 30.266432},
{"lng": 119.792523, "lat": 30.266612},
{"lng": 119.784659, "lat": 30.266806},
{"lng": 119.776599, "lat": 30.267011},
{"lng": 119.768709, "lat": 30.267196},
{"lng": 119.760887, "lat": 30.267383},
{"lng": 119.752959, "lat": 30.267574},
{"lng": 119.744344, "lat": 30.267756},
{"lng": 119.736509, "lat": 30.26793},
{"lng": 119.728267, "lat": 30.268126},
{"lng": 119.720347, "lat": 30.268307},
{"lng": 119.711667, "lat": 30.268522},
{"lng": 119.704749, "lat": 30.268711},
{"lng": 119.695947, "lat": 30.268938},
{"lng": 119.688435, "lat": 30.269119},
{"lng": 119.680814, "lat": 30.269314},
{"lng": 119.672489, "lat": 30.2695},
{"lng": 119.665003, "lat": 30.269679},
{"lng": 119.656252, "lat": 30.269882},
{"lng": 119.6482, "lat": 30.270048},
{"lng": 119.63949, "lat": 30.270219},
{"lng": 119.631553, "lat": 30.270371},
{"lng": 119.623965, "lat": 30.270508},
{"lng": 119.614958, "lat": 30.270686},
{"lng": 119.606231, "lat": 30.270856},
{"lng": 119.599116, "lat": 30.270994},
{"lng": 119.589894, "lat": 30.271181},
{"lng": 119.581016, "lat": 30.271327},
{"lng": 119.574547, "lat": 30.271438},
{"lng": 119.567048, "lat": 30.271555},
{"lng": 119.558983, "lat": 30.271686},
{"lng": 119.550153, "lat": 30.271816},
{"lng": 119.540519, "lat": 30.271965},
{"lng": 119.531584, "lat": 30.272064},
{"lng": 119.522302, "lat": 30.272163},
{"lng": 119.51427, "lat": 30.272243},
{"lng": 119.505688, "lat": 30.272336},
{"lng": 119.496484, "lat": 30.272442},
{"lng": 119.489816, "lat": 30.2725},
{"lng": 119.480915, "lat": 30.272598},
{"lng": 119.472631, "lat": 30.272696},
{"lng": 119.463857, "lat": 30.272808},
{"lng": 119.456295, "lat": 30.272895},
{"lng": 119.449164, "lat": 30.272976},
{"lng": 119.441821, "lat": 30.273055},
{"lng": 119.434615, "lat": 30.273127},
{"lng": 119.426791, "lat": 30.273205},
{"lng": 119.418848, "lat": 30.273284},
{"lng": 119.411175, "lat": 30.273358},
{"lng": 119.401223, "lat": 30.273466},
{"lng": 119.394286, "lat": 30.273536},
{"lng": 119.386289, "lat": 30.273608},
{"lng": 119.378303, "lat": 30.273678},
{"lng": 119.370311, "lat": 30.273749},
{"lng": 119.362312, "lat": 30.273821},
{"lng": 119.353327, "lat": 30.273905},
{"lng": 119.345333, "lat": 30.273979},
{"lng": 119.337333, "lat": 30.274054},
{"lng": 119.329337, "lat": 30.274127},
{"lng": 119.321338, "lat": 30.274202},
{"lng": 119.313349, "lat": 30.274276},
{"lng": 119.305354, "lat": 30.274348},
{"lng": 119.296363, "lat": 30.27443},
{"lng": 119.28836, "lat": 30.274502},
{"lng": 119.279359, "lat": 30.274586},
{"lng": 119.269596, "lat": 30.274686},
{"lng": 119.261603, "lat": 30.27476},
{"lng": 119.253606, "lat": 30.274829},
{"lng": 119.245611, "lat": 30.274904},
{"lng": 119.237617, "lat": 30.274977},
{"lng": 119.229621, "lat": 30.275049},
{"lng": 119.220954, "lat": 30.275142},
{"lng": 119.213327, "lat": 30.275217},
{"lng": 119.205966, "lat": 30.27529},
{"lng": 119.19755, "lat": 30.275371},
{"lng": 119.18915, "lat": 30.275449},
{"lng": 119.180743, "lat": 30.275527},
{"lng": 119.173576, "lat": 30.275597},
{"lng": 119.165189, "lat": 30.275676},
{"lng": 119.156822, "lat": 30.275751},
{"lng": 119.149705, "lat": 30.275822},
{"lng": 119.141336, "lat": 30.275898},
{"lng": 119.133969, "lat": 30.27597},
{"lng": 119.125642, "lat": 30.276054},
{"lng": 119.117269, "lat": 30.276135},
{"lng": 119.108896, "lat": 30.276217},
{"lng": 119.100174, "lat": 30.276305},
{"lng": 119.092152, "lat": 30.276382},
{"lng": 119.083799, "lat": 30.27647},
{"lng": 119.075933, "lat": 30.276554},
{"lng": 119.068016, "lat": 30.276635},
{"lng": 119.059296, "lat": 30.276723},
{"lng": 119.050916, "lat": 30.276801},
{"lng": 119.042315, "lat": 30.276872},
{"lng": 119.033942, "lat": 30.276947},
{"lng": 119.025568, "lat": 30.277023},
{"lng": 119.018502, "lat": 30.277095},
{"lng": 119.009712, "lat": 30.277181},
{"lng": 119.002023, "lat": 30.27725},
{"lng": 118.99296, "lat": 30.27734},
{"lng": 118.984609, "lat": 30.277431},
{"lng": 118.977512, "lat": 30.277509},
{"lng": 118.969863, "lat": 30.277586},
{"lng": 118.961963, "lat": 30.277665},
{"lng": 118.95406, "lat": 30.277741},
{"lng": 118.946776, "lat": 30.277817},
{"lng": 118.93798, "lat": 30.277917},
{"lng": 118.929156, "lat": 30.278019},
{"lng": 118.920363, "lat": 30.278123},
{"lng": 118.912129, "lat": 30.278216},
{"lng": 118.903713, "lat": 30.278316},
{"lng": 118.89528, "lat": 30.278415},
{"lng": 118.885209, "lat": 30.278523},
{"lng": 118.876301, "lat": 30.278611},
{"lng": 118.867821, "lat": 30.278696},
{"lng": 118.859702, "lat": 30.278779},
{"lng": 118.851629, "lat": 30.278862},
{"lng": 118.843944, "lat": 30.278942},
{"lng": 118.835866, "lat": 30.279026},
{"lng": 118.828178, "lat": 30.279109},
{"lng": 118
相关推荐
最新推荐
详解vue项目中调用百度地图API使用方法
主要介绍了vue项目中调用百度地图API使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Java调用百度图像识别接口
唯一不同的,就是我们需要创建一个通用物体和场景识别,重新获取一个API Key和Secret Key,获取Token方法一样,只不过里面的这2个参数（API Key和Secret Key）不一样 第四步 Token和工具类准备完毕,写图片识别代码 识别...
python调用百度地图WEB服务API获取地点对应坐标值
主要为大家详细介绍了python调用百度地图WEB服务API获取地点对应坐标值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解用Python调用百度地图正/逆地理编码API
主要介绍了详解用Python调用百度地图正/逆地理编码API，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
浅谈java调用Restful API接口的方式
主要介绍了浅谈java调用Restful API接口的方式，具有一定借鉴价值，需要的朋友可以参考下。
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
用 Python 画一个可以动的爱心
好的，我可以帮助您使用Python来绘制一个动态的爱心。您可以使用turtle库来实现。以下是实现代码：
```python
import turtle
import math
# 设置画布和画笔
canvas = turtle.Screen()
canvas.bgcolor("black")
pencil = turtle.Turtle()
pencil.speed(0)
pencil.color("red", "pink")
pencil.pensize(3)
# 定义爱心函数
def draw_love(heart_size, x_offset=0, y_offset=0):
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。