高德地图 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

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

高德地图 JavaScript API 开发系列教程（一）的更多相关文章

  1. 高德地图 JavaScript API 开发系列教程（二）

    上节简单介绍高德地图JavaScript API及网页中基本地图展示.有了地图后我们可以用来做什么?有人说离我最近的超市在哪里,我怎么去?别急,这些功能我们后面都会慢慢实现.今天为大家详细讲解如何在地 ...

  2. 高德地图JavaScript API开发研究

    高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API ...

  3. Arcgis for Androd API开发系列教程（一）——地图显示与GPS定位

    序:最近呢,工作鸭梨不是怎么大,对于自己爱折腾的想法又冒出了水面,开始自己的android开发的学习之旅.但是呢,本人是做GIS的,所以呢,就打算从这方面入手看看,是不是有什么比较好玩的玩意呢,这才导 ...

  4. 高德地图Javascript API设置域名白名单

    在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的K ...

  5. web端高德地图javascript API的调用

    [转载https://www.cnblogs.com/zimuzimu/p/6202244.html]web端高德地图javascript API的调用 关于第三放地图的使用,腾讯.百度.高德 具体怎 ...

  6. 【原创】web端高德地图javascript API的调用

    关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lb ...

  7. 高德地图JS API 开发小结

    项目中有一块功能要用到高德地图,所以,想把编码小结一下. 首先是地图的初始化 var map = new AMap.Map("mapDiv", {                  ...

  8. 微信程序开发系列教程（二）使用JavaScript给微信用户发送消息

    我之前的文章 微信程序开发系列教程(一)开发环境搭建 介绍了微信开发环境的搭建,这篇文章我们就来一步步开发一些具体的功能. 功能需求:当有微信用户关注了您的公众号之后,您用JavaScript发送一个 ...

  9. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

随机推荐

  1. java 复习002

    java东西太多了,我都有点小凌乱了,记得太没结构了 java内存回收机制:垃圾收集GC(Garbage Collection) 两种常用方法: 引用计数(早期使用) 简介:堆中对象每次被栈中引用指向 ...

  2. ubuntu开机自启动脚本编写

    1.将启动脚本复制到/etc/init.d目录下面 2.chmod 755 /etc/init.d/xxx 3.sudo update-rc.d /etc/init.d/xxx defaults 95 ...

  3. 从Count看Oracle执行计划的选择

    一. 前言 在调查一个性能问题的时候,一个同事问道,为什么数据库有些时候这么不聪明,明明表上有索引,但是在执行一个简单的count的时候居然全表扫描了!难道不知道走索引更快么? 试图从最简单的coun ...

  4. Hibernate检索策略

    1. Hibernate的检索策略概述: 检索数据时的 2 个问题:    1.不浪费内存:当 Hibernate 从数据库中加载 Customer 对象时, 如果同时加载所有关联的 Order 对象 ...

  5. HDU 3687 National Day Parade (暴力)

    题意:给定 n 个人,在 n 列,问你移动最少的距离,使得他们形成一个n*n的矩阵. 析:这个题本来是要找中位数的,但是有特殊情况,所以改成暴力了,时间也很短,就是从第一个能够放左角的位置开始找,取最 ...

  6. java tools: jmap

    SYNOPSIS jmap [ option ] pid click here to see detail DESCRIPTION jmap prints shared object memory m ...

  7. Windows-to-go-带着win10满街跑

    一.前言 有句话是这么说的,程序员对工作是时刻准备着的.无论你是长假还是短假,只要有网,你就躲不开客户.这样子,当你外出的时候你可以选择时刻背着电脑,因为你的电脑有着你顺手的开发工具以及开发环境.我们 ...

  8. Windows 下如何设置 只允许固定IP远程访问

    通过设置IP安全策略限制固定IP访问 说明: (1)以XP环境为例,步骤:先禁止所有IP,再允许固定IP访问. (2)配置过程中很多步骤图是重复的,一些没价值的图就省略了: (3)光看的话可能中间重复 ...

  9. 用BenchmarkDotNet给C#程序做性能测试

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用BenchmarkDotNet给C#程序做性能测试.

  10. iOS 抖动动画

    -(void)animationWithCell:(WaterLevelCollectionCell *)cell{ // 添加摇晃动画 { CAKeyframeAnimation *frame=[C ...