入门指南 最后更新时间: 2021年01月22日
入门指南将带您迅速了解地铁图 JS API的基本使用,学习如何以easy模式创建地铁简易图,使您在最短时间内创建一个地铁图页面。
准备页面
在正式开始开发地图应用之前,您需要做如下几步:
申请JS API的开发者Key
申请地址:https://lbs.amap.com/dev/key
引入地铁图 JS API文件
<script type="text/javascript" src="https://webapi.amap.com/subway?v=1.0&key=您申请的key值&callback=cbk"></script>
html文档中的meta声明
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no"/>
创建地图容器
在页面body里想展示地图的地方创建一个div 容器,并指定id标识:
<div id="mysubway"></div>
创建简易地铁图
做完简单的准备工作之后,就可以开始创建地图了.
easy模式快速创建地铁图
如果希望快速地通过默认设置来开发地铁图,可以使用easy模式来完成创建,只需要下面的简单一句代码,将我们刚刚创建div的id传给subway的构建函数即可,这个时候API将根据默认生成一个北京的地铁图:
var mysubway = subway("mysubway", {easy: 1});
运行之后就可以看到地铁图了。
完整的HTML代码如下:
<html>
<head>
<meta charset="utf-8">
<!--重要meta, 必须!-->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no" name="viewport"/>
<title>
SUBWAY
</title>
</meta>
</head>
<body>
<div id="mysubway">
</div>
<script src="https://webapi.amap.com/subway?v=1.0&key=your_key&callback=cbk">
</script>
<script type="text/javascript">
//开启easy模式, 直接完成地铁图基本功能, 无需自己写交互 window.cbk = function(){ var mysubway = subway("mysubway", { easy: 1 }); };
</script>
</body>
</html>