GPS原理与编程实现高德地图

GPS的原理简单说就是从监测站发射电磁波，计算卫星接收信号所用时间然后乘以光速，求出一个伪距离，一般是4颗卫星定位一点

列出4个点或者更多解方程，解出x,y,z 就是该点坐标

当然这些都是我们不需要关心的，我们这里可以直接使用高德地图api接口来使我们的web应用产生地图和定位。（文末有完整代码）

注册账号并申请Key

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

准备页面

1.在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

HTML

2.添加p标签作为地图容器，同时为该p指定id属性；

HTML

3.为地图容器指定高度、宽度；

CSS

#container {width:300px; height: 180px; } 

4.进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

HTML

5.在完成如上准备工作之后便可以开始进行开发工作了，查看快速入门。

异步加载 JS API

上一节说明的是最基本的同步加载 JS API 的方式，如果您需要异步加载，比如通过appendChild，或者通过require等异步方式来加载，这时需要您需要先准备一个全局的回调函数作为 JS API 异步加载的回调函数，并将其函数名作为callback参数添加在 JS API 的引用地址后面，此时要注意，回调函数应该在脚本请求发出之前进行声明。异步加载方式只有在回调之后，才能开始调用JSAPI的相关接口。比如

JavaScript

 window.onLoad = function(){
 var map = new AMap.Map('container');
 }
 var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
 var jsapi = doc.createElement('script');
 jsapi.charset = 'utf-8';
 jsapi.src = url;
 document.head.appendChild(jsapi);

按照「准备」篇完成页面准备工作之后就可以真正开始地图的开发工作了。本篇带您快速了解：地图、图层、点标记、矢量图形、信息窗体、事件的最基本使用方法。

HELLO，AMAP！

简单创建一个地图只需要一行代码，构造参数中的container为准备阶段添加的地图容器的id：

JavaScript

 var map = new AMap.Map('container');

创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性：

JavaScript

 var map = new AMap.Map('container', {
 zoom:11,//级别
 center: [116.397428, 39.90923],//中心点坐标
 viewMode:'3D'//使用3D视图
 });

图层

默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过map.add方法添加图层：

JavaScript

 var map = new AMap.Map('container', {
 resizeEnable: true,
 center: [116.397428, 39.90923],
 zoom: 13
 });
 //实时路况图层
 var trafficLayer = new AMap.TileLayer.Traffic({
 zIndex: 10
 });
 map.add(trafficLayer);//添加图层到地图

也可以在地图初始化的时候通过layers属性为地图设置多个图层：

JavaScript

 var map = new AMap.Map('container', {
 center: [116.397428, 39.90923],
 layers: [//使用多个图层
 new AMap.TileLayer.Satellite(),
 new AMap.TileLayer.RoadNet()
 ],
 zooms: [4,18],//设置地图级别范围
 zoom: 13
 });

地图 JS API 提供了标准、卫星、路网、路况、建筑等多个官方图层，同时也提供了加载第三方WMS、WMTS、XYZ等标准图层的接口，也提供了把一般的图片、Canvas、视频、热力等作为图层的能力，查看图层相关教程。

点标记与矢量图形

JS API 提供了在地图之上绘制覆盖物的能力，比如点标记 Marker、文本标记 Text、圆点标记 CircleMarker。

添加点标记的方法非常简单，比如添加一个默认样式的Marker：

JavaScript

 var marker = new AMap.Marker({
 position:[116.39, 39.9]//位置
 })
 map.add(marker);//添加到地图

移除的方法如下：

JavaScript

 map.remove(marker)

查看点标记相关教程

也提供了绘制圆Circle、折线 Polyline、多边形 Polygon、椭圆 Ellipse、矩形 Rectangle、贝瑟尔曲线 BesizerCurve等矢量图形的能力，比如添加折线：

JavaScript

 var lineArr = [
 [116.368904, 39.913423],
 [116.382122, 39.901176],
 [116.387271, 39.912501],
 [116.398258, 39.904600]
 ];
 var polyline = new AMap.Polyline({
 path: lineArr, //设置线覆盖物路径
 strokeColor: "#3366FF", //线颜色
 strokeWeight: 5, //线宽
 strokeStyle: "solid", //线样式
 });
 map.add(polyline);

查看矢量图形关教程

事件功能与信息窗体

JS API 提供的Map、点标记、矢量图形的实例均支持事件，鼠标或者触摸操作均会触发相应的事件。我们通过给点标记绑定click事件来简单了解事件系统和信息窗体的基本使用：

JavaScript

 var infoWindow = new AMap.InfoWindow({ //创建信息窗体
 isCustom: true, //使用自定义窗体
 content:'信息窗体', //信息窗体的内容可以是任意html片段
 offset: new AMap.Pixel(16, -45)
 });
 var onMarkerClick = function(e) {
 infoWindow.open(map, e.target.getPosition());//打开信息窗体
 //e.target就是被点击的Marker
 } 
 var marker = new AMap.Marker({
 position: [116.481181, 39.989792]
 })
 map.add(marker);
 marker.on('click',onMarkerClick);//绑定click事件

简单例子完整代码

代码产生的地图