在react中使用高德地图使用了高德地图（甲方要求），实现地图的展示、添加图标、缩放、地区搜索等功能。一起养成写作习惯！

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。

简要介绍

目前，前端的地图使用的比较多的应该是百度地图和高德地图。

这里我使用了高德地图（甲方要求），实现地图的展示、添加图标、缩放、地区搜索等功能。

操作步骤

创建api并在项目中引入

首先，你需要去高德地图的官方网站上注册并登录一个账号，然后在我的应用中去创建一个新的应用，并得到一个 服务平台为web端（JS Api） 的key。然后就可以在项目的index.html的<body>的最上面加入

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

后面的plugin=Map3D,AMap.DistrictSearch就是，你需要用到什么api方法在这里加入组件里就可以使用了。plugin=Map3D表示绘制3D地图，AMap.DistrictSearch表示地区搜索。为什么不在head里面加入呢？是因为我加在head里好像用不了，在组件里无法获取到高德地图。

创建容器

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

创建地图

新增map实例，并且初始化地图。resizeEnable为true可以是否监控地图容器尺寸变化（缩放），zoom表示地图的级别，值越大，放大的更大，看到的地图范围越小。还可以定义mapStyle: 'amap://styles/你在官方自定义的地图'，这样地图就是你的自定义的样式了。

    var map = new window.AMap.Map('container', {
      resizeEnable: true, //是否监控地图容器尺寸变化
      viewMode: '3D', //开启3D视图,默认为关闭
      zoom: 9,
      center: [119.65, 30.327516] //经度在前，纬度在后
    });

此时，你的页面上应该就会出现一张地图，

添加图标

再来添加图标。首先，得先有标记的坐标地址，然后创建图标样式。其中，size可以定义尺寸，image定义图标图片地址，imageSize定义图片大小。

    var icon = new window.AMap.Icon({
      size: new window.AMap.Size(52, 62),
      image: iconstyle,
      imageSize: new window.AMap.Size(52, 62)
    });

最后使用AMap.Marker添加图标。map绑定指定的地图，icon定义图标，position定义图标经纬度坐标，offset表示偏离中心点的距离。

var marker = new window.AMap.Marker({
    map: map,
    icon: icon,
    height: '2rem',
    position: [position.coordinate[0], position.coordinate[1]],
    offset: new window.AMap.Pixel(0, 0)
  });

地区搜索

使用window.AMap.DistrictSearch方法，并输入地址名称，就可以跳转到搜索的地址了。