如下图所示：
接着，设置下禁止浏览器窗口大小改变地图大小，并引入地图核心JS
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
设置因浏览器大小改变地图大小，进行禁止；引入地图核心js前，记得到官网上申请密钥
如下图所示：
地图如何在页面上展示出来，这里就需要一个地图容器。于是，我在<body></body>中设置一个div，作为地图容器，
如下图所示：
接着，设置下body、div元素的样式，如宽度、高度、字体以及字体大小等。这里，必须要设置下宽度和高度，且使用百分比，这样让其自适应，
如下图所示：
然后，编写生成地图的核心JS，指定地图的经纬度，地图为2D的，放大级别zoom，
如下图所示：
最后，将地图初始化函数放到body中的onload事件中，让初始化页面就加载地图，
如下图所示：
7
但是，我发现这样写的话，地图始终不出来；于是，我仔细检查下，结果发现地图容器的ID和初始化函数地图ID不一致，还有没有设置html元素的样式，导致地图始终显示不了。修改完了之后，重新刷新浏览器，地图显示出来了
高德地图api使用方法：
品牌型号：华硕
系统版本：UX30K723A
软件版本：win7，高德开放平台
1、正常登陆后，点击右上角控制台，进入控制台页面。
2、点击左上角‘应用管理’，进入应用页面，创建应用，填写相关信息。
3、如图，创建key，填写对应信息，注意选择‘Web服务’；创建完成后，图二箭头位置的字符串，就是需要在程序调用使用的key。
4、然后点击右上角‘开发文档’，进入页面后，再选择‘Web服务’，再点击对应的api,以‘搜索API’为例。
5、进入详情后，仔细阅读：产品介绍、适用场景、使用限制、使用说明、关键字搜索、周边搜索等。在此以关键字搜索为例：如图，调用图中的url，其中key就是刚才创建应用下的key字符串。
6、复制url,替换自己申请的key,在浏览器中测试运行一下。如图显示，以‘北京大学’关键字搜索，根据api正常返回的数据，就可以提取自的所需字段，或者自行存储，或者页面展示。
下面用的高德地图v2版本，使用的【Key】【安全密钥】仅用于学习与测试（使用次数有限制），公司或个人的项目请到高德控制台中心申请。 amap.vue组件 效果图： uniapp百度echarts图表使用：https://www.jianshu.com/p/409e5453fd38高德地图控制台中心https://console.amap.com/dev/key/app高德地图API文档https://lbs.amap.com/api/jsapi-v2/summary/
