示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 开发指南 > 创建地图 > 显示地图 >

高德 开发 地图 JS API 开发指南 创建地图 显示地图

更新时间:2018年04月20日

地图API的“HELLO WORLD”

开始学习高德地图JavaScript API之前我们看一个最简单的示例。例如我们要显示以北京的天安门为中心的地图,只需要如下几行关键代码:

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

查看示例

备注:如果您不想以天安门做为地图中心点,可使用坐标拾取器获取新的经纬度,并替换至center参数的值。

当然,还需要进行一些简单的准备工作,有如下几个步骤:

加载地图JavaScript API

加载高德地图JavaScript API有两种方式:

1、页面直接引入。

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

http 网址是指 API 文件的位置,v=1.3  指当前使用的API的版本标识。

JS API支持以https方式加载地图,HTTPS的加载方式:

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

2、异步加载 JavaScript API。

<script data-src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&callback=init"></script>
<script>
    function init(){
        var map = new AMap.Map('container', {
            center: [117.000923, 36.675807],
            zoom: 6
        });
        map.plugin(["AMap.ToolBar"], function() {
            map.addControl(new AMap.ToolBar());
        });
    }
</script>

查看示例

选定地图的div容器

<div id="container" style="width:500px; height:300px"></div>

要在页面上显示地图我们需要一个div元素作为地图的容器。在上述示例中,我们定义名为 "container" 的 div,并使用样式属性设置其大小。

创建地图对象

var map = new AMap.Map('container',{
   zoom: 10,
   center: [116.39,39.9]
});
移动端
示例中心
功能
在线体验
常见问题