高德地图APIWeb地图开发系列

Posted 2021-10-16 生命是有光的

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高德地图APIWeb地图开发系列相关的知识，希望对你有一定的参考价值。

✍、目录总览

网上对于地图类开发的教程挺少的，很多的教程基本都是演示一个demo就结束了。
官方文档写的非常详细，本篇只是对官方文档的再解读，可能会有部分认知不准确，主要是为了入门高德地图jsapi的使用。

1、准备工作

官方文档 V2.0：https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare
官方参考手册：https://lbs.amap.com/api/jsapi-v2/documentation

1.1、注册开发者账号

注册开发者账号，注册过程中需要手机验证码，完善信息即可。
注册完成后，进入 [应用管理] -> [创建新应用]，填写应用名称和应用类型

[添加] -> 为应用添加 key

这样我们就可以开始了。

2、Hello World

使用 vscode 创建 html 骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

引入高德地图api文件

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您的密钥"></script>

创建一个 HTML 元素放地图，并设置样式

<style type="text/css">
        html {
            height: 100%
        }
        
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        
        #container {
            height: 100%
        }
    </style>
</head>

<body>

    <div id="container"></div>
    
</body>

创建地图，同时给地图设置中心点、级别、显示模式等属性

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

完整代码为

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您的密钥"></script>
    <style type="text/css">
        html {
            height: 100%
        }
        
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        
        #container {
            height: 100%
        }
    </style>
</head>

<body>

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

</html>

2.1、地图配置

我这里根据官方文档简单列举下我们在实例化地图时可以进行的配置

属性	类型	描述
center	[Number,Number]	初始中心经纬度
zoom	Number	地图显示的缩放级别，可以设置为浮点数
rotation	Number	地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
viewMode	String	地图视图模式, 默认为‘2D’，可选’3D’，选择‘3D’会显示 3D 地图效果。
features	Array< String > (default `['bg','point','road','building']`)	设置地图上显示的元素种类, 支持’bg’（地图背景）、‘point’（POI点）、‘road’（道路）、‘building’（建筑物）
dragEnable	Boolean	地图是否可通过鼠标拖拽平移, 默认为 true
zoomEnable	Boolean	地图是否可缩放，默认值为 true。
rotateEnable	Boolean	地图是否可旋转, 默认为true
scrollWheel	Boolean	地图是否可通过双击鼠标放大地图, 默认为true。
showLabel	Boolean	是否展示地图文字和 POI 信息。默认为true
defaultCursor	String	地图默认鼠标样式。参数 defaultCursor 应符合 CSS 的 cursor 属性规范。
wallColor	String	地图楼块的侧面颜色
roofColor	String	地图楼块的顶面颜色
showBuildingBlock	Boolean	是否展示地图 3D 楼块，默认 true
showIndoorMap	Boolean	是否自动展示室内地图，默认是 false
skyColor	String	天空颜色，3D 模式下带有俯仰角时会显示

var map = new AMap.Map('container', {
    zoom: 11, //级别
    center: [116.397428, 39.90923], //中心点坐标
    viewMode: '3D', //使用3D视图
    wallColor: "green",	// 地图楼快的侧面颜色
    roofColor: 'pink',	// 地图楼快的顶面颜色
    skyColor: 'red',	// 天空颜色
});

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rNdqIJxa-1632637322475)(高德地图(一)].assets/6.png)

2.2、地图组成

使用高德地图 JS API 创建的地图通常由这几部分组成：

地图容器 Container
- 即在准备阶段所创建的指定了id的div对象，这个div将作为承载所有图层、点标记、矢量图形、控件的容器。
图层 Layers
- 高德地图 JS API 即提供了标准图层、卫星图层、路网图层、路况图层等官方标准图层接口
矢量图形 Vector Overlays
- 矢量图形，一般覆盖于底图图层之上，通过矢量的方式(路径或者实际大小)来描述其形状，用几何的方式来展示真实的地图要素，会随着地图缩放而发生视觉大小的变化，但其代表的实际路径或范围不变，除了图中的折线、圆、多边形之外，JS API 还提供了矩形、椭圆、贝瑟尔曲线等常用的矢量图形。3D 视图下的 Mesh、Prism 棱柱、MeshLine 也可以看做是一些特殊的矢量图形。
点标记 Markers
- 普通的点标记 (即 Marker ) ,支持将自定义图标和DOM元素作为展示内容。除了 Marker 之外为了满足不同的场景，JS API 另外提供了丰富的点标记类型，比如圆点标记 (CircleMarker) 、文本标记 (Text)、灵活点标记 (ElasticMarker) 。同时我们提供了海量点（MassMarks）、点聚合（MarkerCluster）来满足大量点标记的展示需求。
地图控件 Map Controls
- 控件浮在所有图层和地图要素之上，用于满足一定的交互或提示功能。一般相对于地图容器静止，不随着地图缩放和中心变化而发生位置的变化。如上图中绿色方框中的比例尺和级别控件

2.3、基础类

使用 JS API 开发之前有几个基础类型需要了解一下，包括：

经纬度 AMap.LngLat
像素点 AMap.Pixel
像素尺寸 AMap.Size
经纬度矩形边界 AMap.Bounds

2.3.1、经纬度 `AMap.LngLat`

经纬度是利用三维球面空间来描述地球上一个位置的坐标系统，每个经纬度坐标由经度 lng 和纬度 lat 两个分量组成。
在 JS API 里使用经纬度来表示地图的中心点center、点标记的位置position、圆的中心点center、折线和多边形的路径path等，以及其他所有表述实际位置的地方。
经纬度的有效范围为经度-180度到+180度，纬度大约-85度到+85度。
JS API 支持的经纬度的写法有两种，使用时经度在前，纬度在后，推荐使用标准写法：

var position = new AMap.LngLat(116, 39);//标准写法

var position = [116, 39]; //简写

var map = new AMap.Center('conatiner',{
  center: position 
})

对于使用到经纬度数组的时候，比如创建一个折线的路径，写法如下：

//标准写法
var path = [new AMap.LngLat(116,39), new AMap.LngLat(116,40), new AMap.LngLat(117,39)] 

var path = [ [116,39], [116,40], [117,39] ]; //简写

var polyline = new AMap.Polyline({
   path : path,
})
map.add(polyline);

使用经纬度类型可以进行一些简单的位置计算，比如点与点、点与线的距离，根据距离差计算另一个经纬度等：

var lnglat1 = new AMap.LngLat(116, 39);
var lnglat2 = new AMap.LngLat(117, 39);
var distance = lnglat1.distance(lnglat2);//计算lnglat1到lnglat2之间的实际距离(m)

var lnglat3 = lnglat1.offset(100,50)//lnglat1向东100m，向北50m的位置的经纬

2.3.2、像素点`AMap.Pixel`

像素点由x和y两个分量组成

var offset  = new AMap.Pixel(-16,-30);

var marker = new AMap.Marker({
   offset:offset,
   icon:'xxx.png',
});
map.add(marker);

2.3.3、像素尺寸`AMap.Size`

像素尺寸由width和height两个分量构成，通常用来描述具有一定大小的对象，比如地图的尺寸，图标的尺寸等

var mapSize = map.getSize();//获取地图大小，返回的是地图容器的像素大小
var width = mapSize.width;	//地图容器像素宽
var height = mapSize.height;//地图容器像素高

2.3.4、经纬度矩形边界`AMap.Bounds`

经纬度矩形边界为一个矩形的经纬度范围，用西南角和东北角的两个经纬度来描述，这两个经纬度分别代表边界的最小值和最大值。
矩形经纬度边界通常用来描述：地图的当前边界、覆盖物的外包矩形边界、图片图层的覆盖范围等。
比如构造一个新的Bounds对象来调成地图的边界范围：

var southWest = new AMap.LngLat(110,20);	// 西南角经纬度
var northEast = new AMap.LngLat(120,30);	// 东北角经纬度值
var bounds = new AMap.Bounds(southWest, northEast);
map.setBounds(bounds);

3、覆盖物

3.1、标记

3.1.1、点标记

官方参考手册：https://lbs.amap.com/api/jsapi-v2/documentation#marker

// 构造点标记
var marker = new AMap.Marker({
    map: map,				// 要显示该 marker 的地图对象
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [116.405467, 39.907761],		// 点标记在地图上显示的位置
    title: 'Hello',							// 鼠标滑过点标记时的文字提示
    visible: true,							// 点标记是否可见，默认值：true
    draggable: true,						// 点标记是否可以拖拽移动,默认为false
    cursor: 'pointer'						// 指定鼠标悬停时的鼠
});


// 将点标记添加到地图上
map.add(marker);

// 移除已创建的 marker
map.remove(marker);

3.1.2、圆形标记CircleMarker

官方参考手册：https://lbs.amap.com/api/javascript-api/reference/overlay#circlemarker

// 构造圆形标记
var CircleMarker = new AMap.CircleMarker({
    map:map, // 要显示该 CircleMarker 的地图对象
    center: [116.397428, 39.90923],//圆心位置
    radius: 5,						//圆点半径,单位px
    strokeColor: '#006600',			//线条颜色，使用16进制颜色代码赋值。默认值为#006600
    strokeOpactiy: 0.9,				//轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
    strokeWeight: 5,				//轮廓线宽度
    fillColor: '#006600',			//圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600
    fillOpacity: 0.9,				//圆形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
})

// 将圆形标记添加到地图上
map.add(CircleMarker);

3.1.3、文本标记Text

官方参考手册：https://lbs.amap.com/api/javascript-api/reference/overlay#text

// 构造文本标记
var text = new AMap.Text({
    map:map, // 要显示该 CircleMarker 的地图对象
    text: 'Hello',//标记显示的文本内容
    position: [116.397428, 39.90923],//点标记在地图上显示的位置，默认为地图中心点
    
})

// 将文本标记添加到地图上
map.add(text);

3.1.4、海量标记LabelMarker

创建一个标注对象，首先要设置标注的位置，同时还可以通过 icon 和 text 属性设置图标和文字（也可以缺省）。

设置一个图标对象

var icon = {
   // 图标类型，现阶段只支持 image 类型
   type: 'image',
   // 图片 url
   image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png',
   // 图片尺寸
   size: [64, 30],
   // 图片相对 position 的锚点，默认为 bottom-center
   anchor: 'center',
};

设置文字对象

var text = {
    // 要展示的文字内容
    content: '中邮速递易',
    // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
    direction: 'right',
    // 在 direction 基础上的偏移量
    offset: [-20, -5],
    // 文字样式
    style: {
        // 字体大小
        fontSize: 12,
        // 字体颜色
        fillColor: '#22886f',
        // 描边颜色
        strokeColor: '#fff',
        // 描边宽度
        strokeWidth: 2,
    }
};

创建 LabelMarker 实例

var labelMarker = new AMap.LabelMarker({
    name: '标注2', // 此属性非绘制文字内容，仅最为标识使用
    position: [116.466994, 39.984904],
    zIndex: 16,
    // 将第一步创建的 icon 对象传给 icon 属性
    icon: icon,
    // 将第二步创建的 text 对象传给 text 属性
    text: text,
});

创建 LabelsLayer

LabelsLayer 图层是承载 LabelMarker 的图层，所有创建的 LabelMarker 需要添加到 LabelsLayer 图层上才能最终展示在地图上。

var labelsLayer = new AMap.LabelsLayer({
    zooms: [3, 20],
    zIndex: 1000,
    // 该层内标注是否避让
    collision: true,
    // 设置 allowCollision：true，可以让标注避让用户的标注
    allowCollision: true,
});

将已创建的 LabelMarker 添加到 LabelsLayer 上

// 添加一个 labelMarker
labelsLayer.add(labelMarker);

将 LabelsLayer 添加到地图实例

map.add(labelsLayer);

3.2、矢量图形

官方参考手册：https://lbs.amap.com/api/jsapi-v2/documentation#circle

// 构造矢量圆形
var circle = new AMap.Circle({
    center: new AMap.LngLat("116.403322", "39.920255"), // 圆心位置
    radius: 1000,  //半径,单位米
    strokeColor: "#F33",  //线颜色
    strokeOpacity: 1,  //线透明度
    strokeWeight: 3,  //线粗细度
    fillColor: "#ee2200",  //填充颜色
    fillOpacity: 0.35, //填充透明度,取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5
    strokeStyle: 'solid',//轮廓线样式，实线:solid，虚线:dashed
});

// add方法可以传入一个覆盖物数组，将点标记和矢量圆同时添加到地图上
map.add([marker,circle]);

当然除了圆形，还有其他：

折线 Polyline
多边形 Polygon
矩形 Rectangle
椭圆覆盖物 Ellipse

官方文档矢量图形：https://lbs.amap.com/api/jsapi-v2/guide/overlays/vector-overlay

3.2.1、折线

这里举一个折线的例子，具体还是得翻阅官方文档。

// 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
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);

3.3、编辑矢量图形

3.3.1、插件的使用

官方文档：插件的使用
JS API 提供了众多的插件功能，这些功能不会主动随着 JSAPI 主体资源下发，需要引入之后才能使用这些插件的功能。

使用插件的功能通常需要三个步骤：

①引入插件

引入插件，支持按需异步加载和同步加载，可同时引入多个插件

异步加载插件

异步加载指的是在 JS API 加载完成之后，在需要使用到某个插件的时候，通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> 
<script type="text/javascript" >
    var map = new AMap.Map('container',{
        zoom:12,
        center:[116.39,39.9]
    以上是关于高德地图APIWeb地图开发系列的主要内容，如果未能解决你的问题，请参考以下文章 
 arcgis api for js入门开发系列十七在线地图（天地图百度地图高德地图）
 Androidd 移动端地图开发之高德地图全功能系列开发二（搜索模块）
 百度地图sdk和高德地图sdk 哪一个更加适合ios 或者安卓平台开发
 android开发如何用高德地图进行模拟定位.
 高德地图怎样实现实时定位，得到当前地点的坐标，位置
 高德地图怎样实现实时定位，得到当前地点的坐标，位置