高德地图 JavaScript API 开发系列教程（一）

2023-08-14 16:13:10

　　高德地图 API 提供包括 Web API 即 JavaScript API，Android API，定位API，IOS API，WP API，Win8 API等，本系列教程主要针对高德 JavaScript API，希望与开发者们共同进步。

　　地图JavaScript API 是由 JavaScript 语言编写的应用程序接口，通常是嵌入到HTML中使用。HTML 配合 CSS 主要控制网页布局和样式，地图JavaScript API 则是占据网站的一部分构建具有地图各种功能且由用户控制交互效果的地图应用。目前高德地图 JavaScript API 提供地图基本操作，地图基本控件（可根据需求自定义控件），地图绘制，地图标注以及本地搜索、出行（公交、步行、驾车）导航、地理|逆地理编码等功能。

　　调用 JavaScript API 前用户需要先注册账户并申请key，API引用地址为“http://webapi.amap.com/maps?v=1.2&key=申请的key”，下面先讲讲最基本的在网页中加载地图是如何实现的。

开发指南：http://api.amap.com/Javascript/guide

参考手册：http://api.amap.com/Javascript/reference

一、告诉浏览器，这是一个HTML文件。代码中的尖括号称为标签，为避免不必要的错误，请严格闭合标签。

<!DOCTYPE HTML>
<html>
</html>

二、一个简单的样式，给你的地图预定一个容身之所。container 即放置地图的地方，也可以直接在<div>中设置

<style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:100%}
</style>

三、引入高德 JavaScript API

<head>
    <script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=申请的key值"></script>
</head>

四、在这里使用上面预定的地图容器

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

五、设置地图初始化属性 mapOptions，如不设置地图初始化属性，地图会根据你所在城市作为地图中心点显示。注意：设置属性时，只一个属性句尾不需要“,”；多个属性时除最后一个属性其余都需要“,”

var mapOptions = {
    center: new AMap.LngLat(116.397428,39.90923), //地图中心点
    level: 13  //地图显示的缩放级别
};

center: 高德 JavaScript API 提供一个容器LngLat放置我们平时见到的坐标（116.397428,39.90923），传给地图，作为地图显示的中心点

center: new AMap.LngLat(116.397428,39.90923)

level: 地图缩放级别，取值[3-18] ,下图分别为取值为3\13\18的效果

六、创建地图实例

mapObj = new AMap.Map("container", mapOptions);

七、载入地图

<body onLoad="mapInit()">
</body>

到这里就完成了基本地图显示

完整代码

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:100%}
</style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=申请的key"></script>
<script language="javascript">
    var mapObj;
    function mapInit(){
        var mapOptions = {　　　　　　 center:new AMap.LngLat(116.397428,39.90923),
        　　level:13
        };
        mapObj = new AMap.Map("container", mapOptions);
    }
</script>
</head>
<body onLoad="mapInit()">
    <div id="container" > </div>
</body>
</html>

初始化默认属性时的完整代码

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:100%}
</style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=申请的key"></script>
<script language="javascript">
    var mapObj;
    function mapInit(){
        mapObj = new AMap.Map("container");
    }
</script>
</head>
<body onLoad="mapInit()">
    <div id="container"> </div>
</body>
</html>

题外话，即便不是码农也可以选择一个好的编辑器，强烈推荐Sublime Text 2

配置说明：http://www.iplaysoft.com/sublimetext.html

看着心情大好，写代码也有了激情有木有～

码农公寓

相关文章