高德地图Amap开发实践

一、简介：

高德开放平台是国内技术领先的LBS（Location Based Services，基于位置的服务）服务提供商，拥有先进的数据融合技术和海量的数据处理能力。高德开放平台向广大开发者提供覆盖移动端和Web端的开发工具，开发者通过调用开发包或接口即可在应用或网页中实现地图显示、标注、位置检索等功能。使得LBS应用的开发过程更加容易。

高德地图JS API是一套JavaScript语言开发的地图应用编程接口，移动端、PC端一体化设计，一套API兼容众多系统平台。目前JS API免费开放使用。

JS API提供了2D、3D地图模式，满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求，同时也提供了POI搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口。

二、开发准备工作：

首先需要注册开发者账号，成为高德开放平台开发者，然后登陆平台，进入“应用管理”页面，点击“创建新应用”按钮。

最后点击“添加”按钮为刚才创建的应用添加Key，需要注意的是：“服务平台”一项请选择“Web 端 ( JS API ) ”。

申请完Key值后还需要三步才能开始开发工作：

1、在前端页面添加 JS API的入口脚本标签，并将其中“您申请的key值”替换为刚刚申请的Key值。为避免地图数据协议和前端资源不匹配导致页面运行报错，只允许在线加载JS API，禁止进行本地转存、与其它代码混合打包等用法；

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.DistrictSearch,AMap.Scale,AMap.AdvancedInfoWindow" type="text/javascript"></script>

2、添加一个div标签作为地图容器，同时为该div指定id属性；

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

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

#container {

width: 100%;

height: calc(100vh);

}

三、开发实践及注意事项：

以上准备工作完成后就可以真正开始地图的开发工作了，接下来就以项目系统为例子，将其所用到的 JS API一一讲解：

1、创建、加载高德地图：

创建一个地图只需要一行代码：var map = new AMap.Map('container');其中的“container”为上面第二步指定的地图容器id。创建时也可以给地图设置中心点、级别、显示模式、自定义样式等属性；像下面这样

var map = new AMap.Map("container", {

zoom: 17,//缩放级别

features: ["bg", "road", "building", "point"],//要显示的元素

mapStyle: "amap://styles/495194f3867d3fe643372ad9281178dc", //设置地图的显示样式

viewMode: "3D", //使用3D视图

resizeEnable: true,//是否监控地图容器尺寸变化

});

2、定位到省市级：

可以直接使用setCity()方法传入行政区名称或adcode来设置地图显示的中心点。行政区名称支持中国、省、市、区/县名称，如遇重名的情况，会按城市编码表顺序返回第一个。Adcode可以在城市编码表中查询。建议不要同时使用center/setCenter()和setCity()，如一起使用程序将以setCity()作为最后结果。

map.setCity("浙江省");

3、点标记：

通过AMap.Marker创建一个默认图标的点标记，创建的时候可以配置该点标记的属性，如位置、自定义图标等。有两种方式可以将点绑定在地图中：1、直接在创建点时用map属性；2、通过map的add方法，这个方法也可以一次添加多个点标记到地图实例。

var marker = new AMap.Marker({

map: map, //要显示该marker的地图对象

position: [lng, lat], //点标记在地图上显示的位置，默认为地图中心点

title: title, //鼠标滑过点标记时的文字提示，不设置则鼠标滑过点标无文字提示

icon: new AMap.Icon({

         size: new AMap.Size(16, 16),

         image: icon,

         imageSize: new AMap.Size(18, 18),

}), //需在点标记中显示的图标。可以是一个本地图标地址，或者Icon对象。

extData: extData, //用户自定义属性，支持JavaScript API任意数据类型

});

map.add(marker);

另外，点标记可以绑定监听事件，如click。

AMap.event.addListener(marker, "click", function () {

console.log("clicked", extData);

});

4、信息窗体：

信息窗体可以用于在特定位置展示自定义内容信息。首先构造content数组，内容可以是HTML要素字符串或者HTMLElement对象，再通过AMap.InfoWindow创建infoWindow实例，创建时可以进行额外属性的配置。最后通过infoWindow.open(map, pos)方法打开该信息窗体，这里的map为AMap.Map对象, 用于展现结果的地图实例；pos为指定位置的坐标地址。

除了默认的信息窗体，还有高级信息窗体，后者封装了输入提示、POI周边搜索、驾车路线规划、公交路线规划和步行路线规划功能，这些封装的功能可以通过设定相关参数来决定是否展示和使用。使用高级信息窗体可以节省大量的开发工作，如果设置了panel属性，路线规划和POI搜索的结果可以显示在 panel 指定的 div 中。

var content = [extData,"电话 : 010-88888888","邮编 : 330100","地址 : 杭州测试地点"];

// 创建 infoWindow 实例

var infoWindow = new AMap. AdvancedInfoWindow({

panel: "result", //结果列表的HTML容器id或容器元素

searchRadius: 1000, //设定周边搜索的半径

content: content.join("<br>"), //传入 dom 对象，或者 html 字符串

offset: new AMap.Pixel(0, -30), //信息窗体显示位置偏移量

autoMove: true, //是否自动调整窗体到视野内

closeWhenClickMap: true, //控制是否在鼠标点击地图后关闭信息窗体

showShadow: true, //控制是否显示信息窗体阴影，取值false时不显示窗体阴影，取值true时显示窗体阴影

});

infoWindow.open(map, marker.getPosition());

5、绘制红线：

项目中需要绘制试点用地红线，由于用地红线是封闭的多边形，所以采用 AMap.Polygon来实现。下图是用地红线的json结构，展开的数组就是绘制红线所需要的数据。需要注意的是，这些数据是非高德坐标系，需要先用AMap.convertFrom方法转换为高德坐标系，再进行绘制，不然绘制出的红线在地图上会有一定的偏移。

let redPath = [

[120.1949711585, 30.2524532235, 0],

[120.1949712078, 30.2524527896, 0],

[120.1949712564, 30.2524523556, 0],

……

[120.1944589677, 30.2526412253, 0],

[120.1945918214, 30.2525389529, 0],

[120.1949711585, 30.2524532235, 0],

];

AMap.convertFrom(redPath, "gps", function (status: any, result: any) {

if (result.info === "ok") {

         var redLineForProject = new AMap.Polygon({

                   map: map,//AMap.Map对象, 展现结果的地图实例

                   strokeWeight: 1.5,//轮廓线宽度

                   strokeColor: "#ff0000",//线条颜色

                   fillColor: "#80d8ff",//多边形填充颜色

                   fillOpacity: 0.01,//多边形填充透明度

                   path: result.locations,//多边形轮廓线的节点坐标数组

         });

}

});

6、行政区划浏览：

项目系统在显示浙江省板块时，省内各市区板块边界会画线，鼠标hover上去会高亮并显示该市区名称。这是用行政区划浏览的UI组件实现的，它提供了全国范围内到区县一级的行政区划数据（含边界），同时提供一些辅助功能，比如区划面绘制、事件监听，以及快速判断经纬度所属的子级区划等。

虽然用行政区划浏览可以完成以上需求，但还不够完善，还需要将除浙江省外的区域都遮罩上。这时候就可以使用AMap.Polygon的path属性来实现。当覆盖物为“环”多边形时（多边形区域在多边形内显示为“岛”），path为二维数组，数组元素为多边形轮廓线的节点坐标数组。“环”多边形时，要求数组第一个元素为外多边形，其余为“岛”多边形，外多边形需包含“岛”多边形，否则程序不作处理。因此，我们可以把整个地图作为外多边形，浙江省的板块在整个地图上就相当于一个“岛”。

let outer = [

new AMap.LngLat(-360, 90, true),

new AMap.LngLat(-360, -90, true),

new AMap.LngLat(360, -90, true),

new AMap.LngLat(360, 90, true),

];

let holes = result.districtList[0].boundaries;

let pathArray = [outer];

pathArray.push.apply(pathArray, holes);

let polygon = new AMap.Polygon({

pathL: pathArray,

fillColor: "#08182B",

fillOpacity: 0.8,

strokeColor: "#2f82ff",

strokeWeight: 1,

strokeOpacity: 1,

});

polygon.setPath(pathArray);

7、POI搜索：

如果需要根据关键字获取对应城市里相关的POI信息，可以使用POI搜索插件。首先通过AMap.service调用搜索插件，然后通过AMap.PlaceSearch配置搜索属性，最后往placesearch.search()中传入搜索值即能完成POI搜索。由于我们已经配置过map属性，所以搜索结果的标注、线路等均会自动添加到绑定的地图实例中。

AMap.service(["AMap.PlaceSearch"], function () {

var placeSearch = new AMap.PlaceSearch({

        map: map, //AMap.Map对象, 展现结果的地图实例

        city: "330000", // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode

        citylimit: true, //是否强制限制在设置的城市内搜索

        type: "餐饮|酒店|电影院", //兴趣点类别，多个类别用“|”分割

});

placeSearch.search("西湖", function (status: any, result: any) {

        // 查询成功时，result即对应匹配的POI信息

        console.log(123, result);

});

});

四、总结：

高德地图JS API还提供了很多功能服务，如右键菜单、地理编码服务、路线规划等等，都可以查看官方参考手册，介绍还是很详尽的；也可以查看相应的示例，示例是用原生js写的，可移植性高。