搭建初始地图页面
搭建一个简单的地图页面作为容器，可以调用百度地图和高德地图等
（1）申请高德API的key
注册账号并申请Key
使用高德地图api需要注册高德地图账号并在开发者中心申请key。
注册好账号后登录 https://console.amap.com/dev/key/app 或进入控制台申请key。
应用——应用管理——我的应用——根据说明创建新应用，应用创建完成后在相应的应用后面点击添加key——注意选择Web服务。
（2）准备html页面
在html页面里面加一个id是“container” 的div标签，高度给100%，准备用来展示后面加载的地图，这个“container”是地图加载的时候指定的容器名，两者需要保持一致才能将地图展示出来.
没有做过html的人，建议这样做：新建文件夹——新建txt文本文档——网上搜索如何设计一个网页，复制代码——按要求改为自己的——将txt后缀改为html.
有编程经验的可以使用pycharm、VS code等编译软件进行编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>公交站点可视化设计</title>
</head>
<body>
<div id="container" style="width: 100%; height: 915px;">存放高德地图的容器</div></body>
// 尺寸可以根据自己的情况做调整
</html>
双击打开html，网页界面如下
（3）引入并加载地图
通过高德地图的Loader.js引入高德地图网页版本，主要是调用了AMapLoader.load(）这个函数，最后将地图呈现再我们最先建立的div中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>公交站点可视化设计</title>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
AMapLoader.load({
"key": "ab20a461111110221f66ca741ceb2eb21", // 申请好的Web端开发者Key，首次调用 load 时必填
"version": "2.0", //指定要加载的JSAPI 的版本，缺省时默认为 1.4.15
"plugins": [], //需要使用的的插件列表，如比例尺"AMap. Scale"等
"AMapUI": {
"version": '1.1', //AMapUI版本
"plugins" : ['overlay/SimpleMarker'], //需要加载的AMNapUI ui插件
},
"Loca":{ 
最低0.47元/天 解锁文章
5166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
