高德地图Web端JavaScript API开发(一)---地图显示

之前做过与高德地图有关的项目开发，高德地图的API使用起来很方便。高德地图 JavaScript API，是由 JavaScript 语言编写的应用程序接口，它能够帮助您在网站或移动端中构建功能丰富、交互性强的地图应用程序。除了基本地图功能的接口外，JavaScript API还提供了诸如地点搜索、路线规划、定位、地址解析、行政区查询等数据服务，您可以根据自己的需要进行选择性使用。目前,最新版本为JavaScript API V1.4.0。

好东西要大家分享，现将高德的开发过程整理一下，与各位互相交流学习

。

首先总结一下地图引用的基本流程，完成这些流程即可完成地图的引入。话不多说，Let's Go!

在官网申请JSAPI的开发者Key； --->登录高德账号，完成key申请

引入高德JavaScript API入口脚本

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=您申请的key值"></script>

创建地图容器，在页面的body中添加一个div容器
<div id="container"></div>
可以使用CSS样式控制地图容器的大小，可以不设置
#container {width:300px; height: 180px; }

创建地图

	var map = new AMap.Map('container');

这个时候API将根据用户所在的城市自动进行地图中心点和级别的设定当然，一般的都是给地图设置中心点和坐标属性（我比较喜欢这样

，省事）

var map = new AMap.Map('container',{
    zoom: 10,				//设置地图缩放等级
    center: [116.39,39.9]		//中心点经纬度，要求经度在前，纬度在后，且使用的是高德坐标
});

在使用过程中我发现还有一个必不可少的因素，那就是引入高德CSS，没有这个link，地图显示不出来
```
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
```

到这里，一个地图就已经可以显示出来了！第一步创建地图就已经完成了！

来源：CSDN

作者：Tiger_shl

链接：https://blog.csdn.net/Tiger_shl/article/details/78029471

标签

高德

javascript

高德api

api

地图api