React 使用原生高德地图

地图是一个 App 里面重要的一个元素，目前市场上比较有名的有高德地图，百度地图，腾讯地图。这里举个例子来讲怎样在 React 使用原生高德地图，其它类型的地图的引入也很类似。

刚开始的时候，本来想着直接从 npm 里面引入，但查了一下，无论高德地图，还是百度，腾讯地图，都没有一个比较全的库，而且大部分最后一次维护都是半年之前的。所以决定直接使用原生的：

首先我们看看，高德地图官方网怎么讲的（https://lbs.amap.com/api/javascript-api/guide/abc/prepare）：

使用高德地图 JS API 开发地图应用之前的一些准备工作：

注册账号并申请Key

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

然后我们再开始把地图引入我们页面：

1. 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

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

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

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

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

#container {width:300px; height: 180px; }