前面的申请ak密钥步骤都是一致的,这里就不重复描述了,可以通过下面的链接看具体步骤然后复制本篇下面的代码
/weixin_46713508/article/details/116902520
创建页面直接复制代码
直接复制代码,把ak密钥改成自己申请创建的即可
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>地铁图展示</title><script type="text/javascript" src="//api./api?type=subway&v=1.0&ak="></script><style type="text/css">#container{height:100%}</style></head><body><div id="container"></div><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></body></html>
查看效果
容易出现的问题,解决方案
1.如果弹出以下内容,就把自己的ak密钥写到代码对应的位置就行
2.中文乱码,如果出现以下内容,在head里面添加以下代码
<!-- 防止乱码 --><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>