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

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

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

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

1. 在官网申请JSAPI的开发者Key； --->登录高德账号，完成key申请
   
   
2. 引入高德JavaScript API入口脚本

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

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

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

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

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

   
   
6. 在使用过程中我发现还有一个必不可少的因素，那就是引入高德CSS，没有这个link，地图显示不出来
   

   <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

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