高德地图javascript API开发教程之初步体验高德地图(1)

2016年09月16日 08:35 | 770次浏览 | 分类: 高德地图Web端开发

JavaScript API简介

高德地图 JavaScript API,是由 JavaScript 语言编写的应用程序接口,它能够帮助您在网站或移动端中构建功能丰富、交互性强的地图应用程序。除了基本地图功能的接口外,JavaScript API还提供了诸如本地搜索、路线规划等数据服务,您可以根据自己的需要进行选择性使用。目前,最新版本为JavaScript API V1.3.18。

调用 JavaScript API 前用户需要先注册账户成为高德地图开发者,并申请key,API引用地址为“http://webapi.amap.com/maps?v=1.3&key=您申请的key”,下面先讲讲最基本的在网页中加载地图是如何实现的。初步体验高德地图。

第一、新建demo.html页面

第二、在<head></head>之间添加如下代码

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key"></script>

css样式必须加上,否则地图不显示。

key是我们在高德地图api管理中心成为开发者之后申请的key

第三、添加地图容器,在<body></body>之间添加如下代码

<div id="container"></div>

第四、初始化高德地图

<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]
        
    });

</script>

zoom地图大小展示的级别。大小共有【3-18】级别

center 地图中心,如不设置地图初始化属性,地图会根据你所在城市作为地图中心点显示。初始化最后一项记得不要带有","否则初始化失败。

第五、效果图


第六、完整代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>基本地图展示</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=a78c809195bb2a6124a930a1e0f1eb02"></script>
   
</head>
<body>
<div id="container"></div>

<script>
    //V型知识库 www.vxzsk.com
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]
        
    });

</script>
</body>
</html>



感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程


上一篇:
^