高德地图—js.api

最新推荐文章于 2024-08-09 18:31:39 发布

xiabe

最新推荐文章于 2024-08-09 18:31:39 发布

阅读量5k

点赞数 1

分类专栏： api 文章标签：高德地图 api

本文链接：https://blog.csdn.net/xiabenshu/article/details/88798448

版权

api 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们通过进入示例中心

JS API /plugin的加载

这段挺复杂的。
https://lbs.amap.com/api/javascript-api/guide/abc/load
https://lbs.amap.com/api/javascript-api/guide/abc/plugins

地图元素结构

在这里插入图片描述
地图容器 Container
即在准备阶段所创建的指定了id的div对象，这个div将作为承载所有图层、点标记、矢量图形、控件的容器。

图层 Layers
图层是指能够在视觉上覆盖一定地图范围，用来描述全部或者部分现实世界区域内的地图要素的抽象概念，一幅地图通常由一个或者多个图层组成。如上图中处于整个地图容器最下方的二维矢量图层和实施交通图层。

   高德地图 JS API 即提供了标准图层、卫星图层、路网图层、路况图层等官方标准图层接口，又提供了加载其他厂商发布的标准地图服务的图层接口，还提供了加载开发者自己的图片、Canvas、视频、热力数据的图层接口。同时也深度开放了可以自定义绘制方法的自定义图层接口。

矢量图形 Vector Overlays
矢量图形，一般覆盖于底图图层之上，通过矢量的方式(路径或者实际大小)来描述其形状，用几何的方式来展示真实的地图要素，会随着地图缩放而发生视觉大小的变化，但其代表的实际路径或范围不变，如上图中红框内的折线、圆、多边形等。

   除了图中的折线、圆、多边形之外，JS API 还提供了矩形、椭圆、贝瑟尔曲线等常用的矢量图形。3D 视图下的 Mesh、Prism 棱柱、MeshLine 也可以看做是一些特殊的矢量图形。

点标记 Markers
点标记是用来标示某个位置点信息的一种地图要素，覆盖于图层之上。如图中蓝色方框中的两个点状要素。其在屏幕上的位置会随着地图的缩放和中心变化而发生改变，但是会与图层内的要素保持相对静止。

   普通的点标记 (即 Marker ) ,支持将自定义图标和DOM元素作为展示内容。除了 Marker 之外为了满足不同的场景，JS API 另外提供了丰富的点标记类型，比如圆点标记 (CircleMarker) 、文本标记 (Text)、灵活点标记 (ElasticMarker) 。同时我们提供了海量点（MassMarks）、点聚合（MarkerCluster）来满足大量点标记的展示需求。

地图控件 Map Controls
控件浮在所有图层和地图要素之上，用于满足一定的交互或提示功能。一般相对于地图容器静止，不随着地图缩放和中心变化而发生位置的变化。如上图中绿色方框中的比例尺和级别控件。

名词

插件 Plugins
插件是独立于JS API 地图核心模块之外的一些功能，比如服务类、绘制工具、矢量图形编辑工具、点聚合、热力图等。这些插件不会主动随 JS API的主体资源的加载而下发，使用之前需要提前引入，详见插件的使用。

地图级别 ZoomLevel
级别与地图的比例尺成正比，每增大一级，地图的比例尺也增大一倍，地图显示的越详细。Web地图的最小级别通常为3级，最大级别各家略有不同，高德地图 JS API 目前最大级别为 20 级。

经纬度 LngLat
坐标通常指经纬度坐标，高德地图的坐标范围大致为：东西经180度（-180——180，西半球为负，东半球为正），南北纬85度（-85——85，北半球为正，南半球为负）。

底图 BaseLayer
严格意义上，底图指处于所有图层和图形最下方的一个图层，通常不透明。可以是单一图层，比如官方标准图层，也可以是图层组合，比图卫星图层和路网图层组合。

地图要素 Map Features
严格意义的地图要素指的是展示在地图上的地理要素，包括道路、区域面、建筑、POI 标注、路名等。开发者自定义的点标记、矢量图形也可以看做是一种地图要素。

标注 Labels
我们习惯将底图上自带的标示一定信息的文字或图标称为标注，比如 POI 标注，道路名称标注等。

地图平面像素坐标 Plane Coordinates
地图平面像素坐标指投影为平面之后的地图上的平面像素坐标，高德地图使用的Web墨卡托投影，在3级时，平面坐标范围为横纵0-256* 2的3次方像素，每级别扩大一倍，即第n级的平面坐标范围为 0-256*2 的 n 次方像素。

投影 Projection
地图投影指的是将地球球面的经纬度坐标映射到地图平面坐标的变换和映射关系。高德地图使用 Web 墨卡托投影，即采用 EPSG:3857 坐标系统。

三维空间坐标 3D Coordinates
三维空间坐标是在 3D 地图模式下的世界坐标，由 x、y、z 三个纬度组成。三维空间坐标通常用于描述 Object3D 类型的几何形体。

从示例中取一段代码研究

<!doctype html>
<html>
<head>
 <!--字符集设置-->
  <meta charset="utf-8">
  <!--给浏览器用的-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--有关移动设备的-->
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <!--样式表-->
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
   <!--容器样式-->
    container {
      width: 100%;
      height: 100%;
    }
  </style>
  <title>地图加载完成</title>
</head>
<body>
	<!-- 这是一个HTML容器。-->
  <div id="container"></div>
  <!-- 用于创建AMAP.MAP-->
  <script src="https://webapi.amap.com/maps?v=1.4.13&key=您申请的key值"></script>
  <!--弹出-->
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });
</script>
  <script>
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });
    map.on("complete", function(){
       log.success("地图加载完成！");  
    });
  </script>
</body>
</html>

可以看到在这里插入图片描述

继续学习api

创建一个地图

需要一个HTML容器：

<div id="container" style="width:500px; height:300px"></div>

然后，构造一个Map类的实例，并创建一定的参数。

// 构造地图对象的方法一：使用地图容器ID创建
var map = new AMap.Map('container');
// 构造地图对象的方法二：使用地图容器对象创建
var map = new AMap.Map(document.getElementById("container"
));

//创建的时候添加一些参数
var map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],//设置地图中心点坐标
    layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D',  //设置地图模式
    lang:'zh_cn',  //设置地图语言类型
});

注意：可以创建多个容器，创建多个地图

地图加载完成/销毁:

map.on('complete', function(){
    // 地图图块加载完成后触发
});
// 销毁地图，并清空地图容器
map.destroy( );

地图状态

中心点

设置、获取地图中心点（setCenter、getCenter）：

// 传入经纬度，设置地图中心点
var position = new AMap.LngLat(116, 39);  // 标准写法
// 简写 var position = [116, 39]; 
map.setCenter(position); 
// 获取地图中心点
var currentCenter = map.getCenter();

缩放级别

设置、获取地图缩放级别（setZoom、getZoom）：

// 设置地图级别，级别为数字。
// PC上，参数zoom可设范围：[3,18]；
// 移动端：参数zoom可设范围：[3,19]
map.setZoom(13); 
// 获取地图级别
var currentZoom = map.getZoom();

同时设置地图中心点和缩放级别（setZoomAndCenter):

// 同时传入缩放级别和中心点经纬度
map.setZoomAndCenter(14, [116.205467, 39.907761]);

根据覆盖物范围调整视野

在这里插入图片描述
地图上覆盖物较多的情况下，要保证覆盖物都在事业范围内：
产生自适应的效果。

// 创建一条折线覆盖物
var path = [
    new AMap.LngLat("116.368904","39.913423"),
    new AMap.LngLat("116.382122","39.901176"),
    new AMap.LngLat("116.387271","39.912501"),
    new AMap.LngLat("116.398258","39.904600")
];
var polyline = new AMap.Polyline({
    path: path,  
    borderWeight: 2, // 线条宽度，默认为 1
    strokeColor: 'red', // 线条颜色
    lineJoin: 'round' // 折线拐点连接处样式
});
map.add(polyline);

// 创建两个点标记
var marker1 = new AMap.Marker({
    position: new AMap.LngLat(117.39, 39.9),   // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京'
});
var marker2 = new AMap.Marker({
    position: new AMap.LngLat(118.39, 39.9),   // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京'
});
map.add(marker1);
map.add(marker2);

// 自动适配到合适视野范围
// 无参数，默认包括所有覆盖物的情况
map.setFitView();
// 传入覆盖物数组，仅包括polyline和marker1的情况
map.setFitView([polyline,marker1]);