react-amap-extend v0.0.1-alpha.2

react-amap-extend

react-amap-extend 继承与扩展自 react-amap 项目。在 react-amap 项目的基础上，扩展了如下的功能：

• 提供了加载离线高德地图 js api 的功能，可在内网环境下使用。
• 封装了更多的高德地图 js api 的组件。
• 修正了 react-amap 中存在的一些 bug。

react-amap-extend 目前已经包含的组件如下：

如何在项目中接入 react-amap-extend;

安装

npm install --save react-amap-extend

npm 用法

<div id="app"></div>

#app {
  width: 600px;
  height: 400px;
}

import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-amap-extend';

ReactDOM.render(
  <Map amapkey={YOUR_AMAP_KEY} version={VERSION} />,
  document.querySelector('#app')
)

amapkey 说明见下文 version 指定高德地图版本 不填则使用默认值: 1.4.0

也可以手工引入你需要的组件：

import Map from 'react-amap-extend/lib/map';
import Marker from 'react-amap-extend/lib/marker';
// ... your other code

以上为简单场景的应用。 tips: Map 组件的父元素须设置高度和宽度；关于代码中的 Map 组件的 amapkey 属性见下方的说明。

配合离线高德 js api 使用

import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-amap-extend';

ReactDOM.render(
  <Map 
    amapkey={YOUR_AMAP_KEY}
    hostAndPath={''} />,
  document.querySelector('#app')
)

在Map组件中，传入hostAndPath参数，hostAndPath参数为自行部署的高德 js api 地址。

CDN 用法

在 HTML 页面中加入 react-amap-extend 库的 CDN 地址，插件会在 window 下暴露 ReactAMAP 变量。

<script src="path/to/react.js"></script>
<script src="path/to/react-dom.js"></script>
<script src="path/to/dist/react-amap-extend.js"></script>
<script>
  var Map = ReactAMAP.Map;
  var Marker = ReactAMAP.Marker;
  
  var pos = { longitude: 120, latitude: 30 };
  var YourApp = React.createElement(
    Map,
    { center: pos },
    React.createElement(
      Marker,
      { position: pos },
      null
    )
  );
  ReactDOM.render(YourApp, document.getElementById('root'));
</script>

CDN 地址

实际应用中你可以使用下面的 CDN 地址，也可以把脚本下载下来本地部署。

tips: 记得将其中的 VERSION 替换为真实版本号。

• https://unpkg.com/react-amap-extend@VERSION/dist/react-amap-extend.js
• https://unpkg.com/react-amap-extend@VERSION/dist/react-amap-extend.min.js

关于 Key

在上面的例子中需要给 Map 组件传入 amapkey 属性，这个是高德地图给开发者分配的开发者 Key；你可以在高德开放平台申请你自己的 Key。

在 react-amap-extend 中 Key 的传入方式有两种:

• 给 Map 组件传入 amapkey 属性（因为 React 框架本身对 key 属性有其他作用，所以不能用 key，所以我们用 amapkey），这样的缺点是如果多个地方使用就要每次都要传入；
• 你也可以定义一个纯组件,把 Map 组件的 amapkey 属性写好后返回新组件。
• 直接把你的 Key 定义在全局变量 window.amapkey 上，react-amap-extend 在调用高德接口时会尝试从这里读取。（不推荐）

开发

npm install
npm start # http://localhost:9001

License

MIT License