前端时间因为公司需要研究 了一下百度的教程
然后写个简约的笔记记录一下自己学习的收获，只为了满足自己暂时的写作热情
 

高德地图WEB开发（key申请、api）简约教程

1.首先我们需要去“高德地图开发平台”
通过“百度搜索 ”或者“谷歌搜索 ” 高德地图然后会有一个高德开发平台|高德地图apl

2.登录高德开发平台
这是高德开发平台的官网，然后点击登录，没有注册就好

 
3.进入控制台创建新应用
进入控制台之后选择“应用管理”然后点击创建新应用，一定要记得这一步哟

 

应用的名称和类型更具自己的实际情况选择

创建好之后就会有一个新的应用了，然后点击添加key

在这里填写好key名称之后选择服务平台，如果你是手机端就算对应的 andriod/ios，然后因为我是做的web端所以选择的是“web端”
每个服务平台可以使用的服务是不一样的，注意看哟
然后点击提交就有了一个key了

4.key的使用以及api的使用
得到了key，那么怎么使用高德地图呢，当然是看他的api了
通过首页的“开发与支持”下的开发文档web端 JavaScript api就能看到
 

 

上图就是api的页面了，这个还是比较全面的，如果你不熟悉感觉还是不知道怎么调用我们直接看他的实例，直接用代码展示如何调用
在菜单的“开发与支持”示例与体验中的JS API 示例中心

 
这里就十分的明了了，当然这里只是部分演示，很多类以及方法都是没有写出来的，可以去api自己查看详细，但是这里介绍了基本的地图使用以及各种功能的调用

 
 
5.高的地图API的使用
这里简单的介绍一下使用的方法
 
1.高德地图js以及css的调用 其中第四行需要的key是刚才上面添加应用得到的key
  1.    <title>基本地图展示</title>
  2.      <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
  3.      <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
  4.      <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
  5.      <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

2.高德地图js实例化启动地图

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

3.完整的基础地图展示（代码来源于高德地图AI）

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7.      <title>基本地图展示</title>
  8.      <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
  9.      <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
  10.      <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
  11.      <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
  12.  </head>
  13.  <body>
  14.  <div id="container"></div>
  15.  
  16.  <script>
  17.      var map = new AMap.Map('container', {
  18.          resizeEnable: true,
  19.          zoom:11,
  20.          center: [116.397428, 39.90923]
  21.      });
  22.  
  23.  </script>
  24.  </body>
  25.  </html>
 
4.关键字搜索
 
  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7.      <title>关键字检索</title>
  8.      <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
  9.      <style type="text/css">
  10.          #panel {
  11.              position: absolute;
  12.              background-color: white;
  13.              max-height: 90%;
  14.              overflow-y: auto;
  15.              top: 10px;
  16.              right: 10px;
  17.              width: 280px;
  18.          }
  19.      </style>
  20.      <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
  21.      <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
  22.  </head>
  23.  <body>
  24.  <div id="container"></div>
  25.  <div id="panel"></div>
  26.  <script type="text/javascript">
  27.      var map = new AMap.Map("container", {
  28.          resizeEnable: true
  29.      });
  30.      AMap.service(["AMap.PlaceSearch"], function() {
  31.          var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
  32.              pageSize: 5,
  33.              pageIndex: 1,
  34.              city: "010", //城市
  35.              map: map,
  36.              panel: "panel"
  37.          });
  38.          //关键字查询
  39.          placeSearch.search('北京大学');
  40.      });
  41.  </script>
  42.  </body>
  43.  </html>

5.驾车路线规划（根据起点终点）

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7.      <title>按起终点经纬度规划路线</title>
  8.      <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
  9.      <style type="text/css">
  10.          #panel {
  11.              position: fixed;
  12.              background-color: white;
  13.              max-height: 90%;
  14.              overflow-y: auto;
  15.              top: 10px;
  16.              right: 10px;
  17.              width: 280px;
  18.          }
  19.      </style>
  20.      <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.Driving"></script>
  21.      <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
  22.  </head>
  23.  <body>
  24.  <div id="container"></div>
  25.  <div id="panel"></div>
  26.  <script type="text/javascript">
  27.      //基本地图加载
  28.      var map = new AMap.Map("container", {
  29.          resizeEnable: true,
  30.          center: [116.397428, 39.90923],//地图中心点
  31.          zoom: 13 //地图显示的缩放级别
  32.      });
  33.      //构造路线导航类
  34.      var driving = new AMap.Driving({
  35.          map: map,
  36.          panel: "panel"
  37.      });
  38.      // 根据起终点经纬度规划驾车导航路线
  39.      driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719));
  40.  </script>
  41.  </body>
  42.  </html>

6.实时路况

  1.  <body>
  2.  <div id="container"></div>
  3.  <div class="button-group">
  4.      <input type="button" class="button" id="control" value="显示/隐藏实时路况"/>
  5.  </div>
  6.  <script>
  7.      var map = new AMap.Map('container', {
  8.          resizeEnable: true,
  9.          center: [116.397428, 39.90923],
  10.          zoom: 13
  11.      });
  12.      //实时路况图层
  13.      var trafficLayer = new AMap.TileLayer.Traffic({
  14.          zIndex: 10
  15.      });
  16.      trafficLayer.setMap(map);
  17.  
  18.      var isVisible = true;
  19.      AMap.event.addDomListener(document.getElementById('control'), 'click', function() {
  20.          if (isVisible) {
  21.              trafficLayer.hide();
  22.              isVisible = false;
  23.          } else {
  24.              trafficLayer.show();
  25.              isVisible = true;
  26.          }
  27.      }, false);
  28.  </script>
  29.  </body>

7.3d楼层

  1.  <body>
  2.  <div id="container"></div>
  3.  <div id="tip"></div>
  4.  <script>
  5.      var map = new AMap.Map("container", {
  6.          resizeEnable: true,
  7.          center: [121.498586, 31.239637],
  8.          zoom: 17
  9.      });
  10.      if (document.createElement('canvas') && document.createElement('canvas').getContext && document.createElement('canvas').getContext('2d')) {
  11.          // 实例化3D楼块图层
  12.          var buildings = new AMap.Buildings();
  13.          // 在map中添加3D楼块图层
  14.          buildings.setMap(map);
  15.      } else {
  16.          document.getElementById('tip').innerHTML = "对不起，运行该示例需要浏览器支持HTML5！";
  17.      }
  18.  </script>
  19.  </body>

8.卫星图

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7.      <title>卫星图</title>
  8.      <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
  9.      <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
  10.      <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
  11.  </head>
  12.  <body>
  13.  <div id="container"></div>
  14.  <script>
  15.      var map = new AMap.Map('container', {
  16.          center: [116.397428, 39.90923],
  17.          layers: [new AMap.TileLayer.Satellite()],
  18.          zoom: 13
  19.      });
  20.  </script>
  21.  </body>
  22.  </html>
 功能还有很多，这里就不一一叙述了，大家可以去高德地图开发平台查看
 

[WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程的更多相关文章

  1. web开发调用百度地图API + AK申请

    web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...

  2. 百度地图和高德地图结合在web中的使用（二）

    百度地图在web中的使用(二) 背景:在做一个关于地理位置字段时,初始位置使用百度地图获取时失败,获取的位置信息不准确,奈何产品说友商好使的啊,F12看后是采用的高德,所以在这采用高德地图获取初始位置 ...

  3. arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. 百度地图和高德地图坐标系的互相转换 四种Sandcastle方法生成c#.net帮助类帮助文档 文档API生成神器SandCastle使用心得 ASP.NET Core

    百度地图和高德地图坐标系的互相转换   GPS.谷歌.百度.高德坐标相互转换 一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系,一般用国际GPS纪录仪记 ...

  5. 几个地图（高德、百度、Apple、Google）URL API

    移动应用中,如何在自己的App中调起第三方的原生地图App,并显示相关的信息,如显示指定的一个坐标位置,显示一个起点到终点的路线查询,等等. 目前几个主要的地图商都提供了自己的App通过URL调用的形 ...

  6. 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  7. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  8. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  9. 【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘

    原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...

随机推荐

  1. 异步加载的JS如何在chrome浏览器断点调试？

    我们常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢? 方案一: 在 ...

  2. Docker学习--docker的基本认识

    1.Docker 架构 Docker 使用客户端-服务器 (C/S) 架构模式,使用远程API来管理和创建Docker容器. Docker 容器通过 Docker 镜像来创建. 容器与镜像的关系类似于 ...

  3. java基本语法一

    1 关键字和保留字 1.1 关键字 关键字的定义:被java语言赋予了特殊含义,用做专门用途的字符串(单词). 关键字的特点:关键字中的所有字母都是小写. 1.2 保留字 java保留字:现有Java ...

  4. 学习微信小程序及知识占及v-if与v-show差别

    注意点: 一.接口调用方式: getOpenid: function () { var that = this; return new Promise(function (resolve, rejec ...

  5. Python基础8：列表推导式（list）字典推导式(dict) 集合推导式(set)

    推导式分为列表推导式(list),字典推导式(dict),集合推导式(set)三种 1.列表推导式也叫列表解析式.功能:是提供一种方便的列表创建方法,所以,列表解析式返回的是一个列表格式:用中括号括起 ...

  6. EF 数据库连接约定(Connection String Conventions in Code First)

    一个典型的EF应用大多数情况下是一个DbContext的派生类(derived class)来控制,通常可以使用该派生类调用DbContext的构造函数,来控制以下的东西: (1).上下文如何连接到数 ...

  7. 《LeetBook》leetcode题解(18) : 4Sum[M]

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  8. Windows里如何正确安装Zookeeper以服务运行（博主推荐）（图文详解）

    不多说,直接上干货! 为什么要在Win下来安装Zookeeper呢? 其实玩过大数据的人很清楚,在Linux下我更不说了.在win下,如Disconf .Dubbo等应用. 所以,它的应用是非常广的. ...

  9. SVN服务器搭建和使用以及冲突解决、用户密码修改

    Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: http:// ...

  10. MCS锁和CLH锁

    CLH锁:自旋锁,在上一个节点上等待,先上代码: public class CLHLock { /** * 保证原子性操作 * */ private AtomicReference<Node&g ...