GPS的原理简单说就是从监测站发射电磁波,计算卫星接收信号所用时间然后乘以光速,求出一个伪距离,一般是4颗卫星定位一点
列出4个点或者更多解方程,解出x,y,z 就是该点坐标
当然这些都是我们不需要关心的,我们这里可以直接使用高德地图api接口来使我们的web应用产生地图和定位。(文末有完整代码)
注册账号并申请Key
1. 首先,注册开发者账号,成为高德开放平台开发者
2. 登陆之后,在进入「应用管理」 页面「创建新应用」
3. 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
准备页面
1.在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key;
HTML
2.添加div标签作为地图容器,同时为该div指定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