Commit aec36296 authored by wind.wang's avatar wind.wang

add web amap

parent 051dfb31
......@@ -2,18 +2,20 @@
// import Marker from './maps/Marker'
// import Polygon from './maps/Polygon'
// import Circle from './maps/Circle'
import { Map, Marker as RMarker } from 'react-amap';
import React from 'react';
import { Map, Marker as RMarker, InfoWindow } from 'react-amap';
const MapView = (props) => {
return <Map {...props} center={props.coordinate}></Map>
}
const Marker = (props) => {
return <RMarker {...props} center={props.coordinate} />
return <RMarker {...props} position={props.coordinate} />
}
MapView.Marker = Marker
export default MapView
export {
MapView,
Marker,
InfoWindow,
}
......@@ -2,3 +2,5 @@ import { fetchLocation, setAmapKey } from './app/location';
module.exports.setAmapKey = setAmapKey;
module.exports.fetchLocation = fetchLocation;
export * from './app/amap3d'
\ No newline at end of file
{
"presets": ["es2015", "stage-0", "react"]
}
\ No newline at end of file
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# http://editorconfig.org
root = true
[**]
# 文件结尾符
end_of_line = lf
insert_final_newline = true
# 去除行尾空白字符
trim_trailing_whitespace = true
# 编码格式
charset = utf-8
# 项目中采用tab作为代码缩进样式
indent_style = space
indent_size = 2
[*.md]
trim_trailing_whitespace = false
[{package.json,.babelrc,.eslintrc}]
indent_style = space
indent_size = 2
[*.yml]
indent_style = space
indent_size = 2
\ No newline at end of file
{
"env": {
"es6": true
},
"plugins": ["react", "flowtype"],
"extends": ["elemefe", "plugin:flowtype/recommended"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"semi": "off"
},
"settings": {
"flowtype": {
"onlyFilesWithFlowAnnotation": false
}
}
}
# react-amap Contributing Guide
Hi! Thank you for choosing react-amap.
React-amap is a Map Components Based On React and AMap(amap.com)
We are excited that you are interested in contributing to react-amap. Before submitting your contribution though, please make sure to take a moment and read through the following guidelines.
## Issue Guidelines
- Issues are exclusively for bug reports and feature requests. Other questions may be closed directly.
- Before submitting an issue, please check if similar problems have already been issued.
- Please specify which version of react-amap you are using, and provide OS and browser information. [JSFiddle](https://jsfiddle.net/) is recommended to build a live demo so that your issue can be reproduced clearly.
## Pull Request Guidelines
- Fork this repository to your own account. Do not create branches here.
- **DO NOT** include files inside `lib` directory.
- Rebase before creating a PR to keep commit history clear.
- If you are fixing a bug, please include detailed description of the bug in the PR.
- Merging a PR takes two maintainers: one approves the changes after reviewing, and then the other reviews and merges.
## Code Style
Just comply with the [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) configuration of [ElemeFE](https://github.com/elemefe).
# react-amap Contributing Guide
Hi! 首先感谢你使用 react-amap。
react-amap 是一个基于 React 封装的高德地图组件库。
react-amap 的成长离不开大家的支持,如果你愿意为 react-amap 贡献代码或提供建议,请阅读以下内容。
## Issue 规范
- issue 仅用于提交 Bug 或 Feature,其它内容可能会被直接关闭。
- 在提交 issue 之前,请搜索相关内容是否已被提出。
- 请说明 react-amap 的版本号,并提供操作系统和浏览器信息。推荐使用 [JSFiddle](https://jsfiddle.net/) 生成在线 demo,这能够更直观地重现问题。
## Pull Request 规范
- 请先 fork 一份到自己的项目下,不要直接在仓库下建分支。
- **不要提交** `lib` 里面打包的文件。
- 提交 PR 前请 rebase,确保 commit 记录的整洁。
- 如果是修复 bug,请在 PR 中给出描述信息。
- 合并代码需要两名维护人员参与:一人进行 review 后 approve,另一人再次 review,通过后即可合并。
## 代码规范
遵循饿了么前端的 [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) 即可
<!--
请确保阅读下面的内容并勾选。没有勾选的 Issue 将被关闭。
-->
+ [ ] 我已经搜索过 issue,没有类似的问题,或者类似的问题仍然没有解决方案。
+ [ ] 我已经搜索过[文档](https://elemefe.github.io/react-amap/articles/start),并且仍然没有找到解决方案。
+ [ ] 我写了个问题重现的例子,链接或者代码将会贴在下面。
<!--
请确保阅读上面的内容并勾选。没有勾选的 Issue 将被关闭。
-->
#### Reproduce Example Link or Code Fragment
#### What is Expected?
#### What is actually happening?
Please makes sure these boxes are checked before submitting your PR, thank you!
* [ ] Make sure you follow the contributing guide.
* [ ] Rebase before creating a PR to keep commit history clear.
* [ ] Add some descriptions and refer relative issues for you PR.
language: node_js
node_js:
- "6"
branched:
only:
- master
script:
- npm run lint
- npm run browser-build
- npm run site
# 更新日志
## [2017-12-13] 1.2.0
### 更新
1. 对除 Markers 以外的其他组件都进行了重构;重构效果如下:
1. 抽出了共用的逻辑代码,这部分代码以 HOC 注入到组件中;
2. 重构后的组件 events 属性响应式的;
3. 组件属性变更时对实例的操作更加智能;(比如对名为 offset 的属性进行修改,会尝试执行 setOffset 方法)
4. 允许用户自己选择高德地图版本(Map 组件的 version 属性);
5. 对外使用的接口不变,所以可以无痛升级。
### 修复
1. 使用 CDN 接入 react-amap 资源时 Marker 组件有个严重的 Bug,不过似乎没人发现,不管了反正已经偷偷修好了。
---
## [2017-11-16] 1.1.2
### 更新
1. Map 组件卸载时自动销毁地图实例对象。
---
## [2017-11-13] 1.1.1
### 更新
1. 重构 APILoader 类,支持加载 AMapUI 组件库。
---
## [2017-10-13] 1.1.0
### 更新
1. 大幅重构 Map 组件;支持 `animateEnable``doubleClickZoom` 等属性的动态配置。
2. 支持 3D 模式。
3. 新增控件 ControlBar。
4. 删除了地图内层一个多余的 div。([#48](https://github.com/ElemeFE/react-amap/issues/48)
3. 支持给 Map 提供 loading 组件以渲染加载效果。
2. 支持给 Marker 组件添加 `className`。([#40](https://github.com/ElemeFE/react-amap/issues/40)
3. 补充了 TypeScript 模块声明,可以在 TypeScript 项目中使用。([#47](https://github.com/ElemeFE/react-amap/issues/47)
---
## [2017-08-14] 1.0.3
### 修复
* 修复部分组件在 unmount 后并没有从地图消失的问题。
---
## [2017-06-14] 1.0.0
### 重大更新
* 现在 react-amap 拥有了扩展能力,你可以自己写一个地图组件并且在 Map 中嵌入;相关文档请参考[自定义地图组件](https://elemefe.github.io/react-amap/articles/extend)
---
## [2017-05-11] 0.2.7
### 优化
* 唯一使用了样式的 Markers 组件,直接把样式写在代码里,不需要为了这个额外引入 css-loader 之类的插件进行打包。
---
## [2017-04-13] 0.2.6
### 优化
* 优化打包方式;支持组件的单个 import
---
## [2017-04-11] 0.2.5
### 修复
* 在同构 SSR 架构的应用中确保不抛出错误
---
## [2017-03-22] 0.2.4-0
### 修复
* 在刷新 Markers 时,把之前存在的标记清空
---
## [2017-03-22] 0.2.3
### 新增
* 新增 [MouseTool](https://elemefe.github.io/react-amap/components/mousetool) 鼠标工具插件;通过该插件,可进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。
---
## [2017-03-16] 0.2.3-0
### 修复
* 因为 React 框架的限制,`key` 属性另有所用,所以定义高德的 Key 时统一为 `amapkey`。详见[关于 key](https://elemefe.github.io/react-amap/articles/start#关于-key)
---
## [2017-03-16] 0.2.2
### 新增
* Marker 组件新增可以定义 render 静态属性渲染外观;也在高德 Marker 实例挂载 render 方法动态渲染外观。
---
## [2017-03-15] 0.2.1
### 优化
* 重新设计 Markers 接口,对标记的外观控制更灵活;本次更新不向下兼容。
---
## [2017-03-14] 0.2.0
### 优化
* 所有组件接口(除 Markers)重新设计,开发者可以通过绑定事件获得高德原生实例。
---
## [2017-02-23] 0.0.1-rc.1
### react-amap 发布
MIT License
Copyright (c) 2017 ElemeFE
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
<img src="https://cloud.githubusercontent.com/assets/3898898/23833571/e5c7ae68-0782-11e7-8590-cecf4f3c969f.png" width="118" height="118" />
# react-amap
[![Build Status](https://travis-ci.org/ElemeFE/react-amap.svg?branch=master)](https://travis-ci.org/ElemeFE/react-amap)
[![npm version](https://badge.fury.io/js/react-amap.svg?_t=20170411)](https://www.npmjs.com/package/react-amap)
[![npm downloads](https://img.shields.io/npm/dm/react-amap.svg)](https://www.npmjs.com/package/react-amap)
> react-amap 是一个基于 React 封装的高德地图组件;帮助你轻松的接入地图到 React 项目中。除了必须引用的 Map 组件外,我们目前提供了最常用的 10 个地图组件,能满足大部分简单的业务场景;如果你有更复杂的需求,或者觉得默认提供的组件功能不够,你完全可以自定义一个地图组件,然后根据高德原生 API 做高德允许你做的一切事情。
### 最近更新
react-amap 升级到 1.1.1,支持加载 [AMapUI 组件库](http://lbs.amap.com/api/javascript-api/guide/amap-ui/intro)。加载方式参考 [Map 组件](/components/map) 关于 **加载 AMapUI 组件库** 的说明。(2017-11-13)
### 扩展组件
从版本 [1.0.0](https://www.npmjs.com/package/react-amap) 开始,react-amap 拥有了组件的扩展能力。如果 react-amap 中已有的组件不能满足你的业务需求,你可以使用自己写的地图组件;
在你的组件中,可以通过 props 访问到创建好的高德地图实例,以及地图的 div 容器;拥有访问这两个属性的能力后,你可以根据高德原生 API 做高德允许你做的一切事情。实际上,react-amap 中的其他组件就是这么做的。文档内容请参考[自定义地图组件](https://elemefe.github.io/react-amap/articles/extend)
目前已有的一些组件:
1. [react-amap-plugin-heatmap](https://www.npmjs.com/package/react-amap-plugin-heatmap),热力图组件。
2. [react-amap-plugin-geolocation](https://www.npmjs.com/package/react-amap-plugin-geolocation),定位组件。
3. [react-amapui-wrapper](https://github.com/Croash/react-amapui-wrapper),可自定义的AMapUI组件。
如果你有写好的组件愿意开源出来的,欢迎提一个 PR 扩展这个列表。
### 在线实时演示
https://jsfiddle.net/ioslh/h4u8mdng/25/
---
如何在项目中接入 react-amap;
### 安装
```sh
npm install --save react-amap
```
### npm 用法
```html
<div id="app"></div>
```
```css
#app {
width: 600px;
height: 400px;
}
```
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-amap';
ReactDOM.render(
<Map amapkey={YOUR_AMAP_KEY} version={VERSION} />,
document.querySelector('#app')
)
```
amapkey 说明见下文
version 指定高德地图版本 不填则使用默认值: 1.4.0
也可以手工引入你需要的组件:
```jsx
import Map from 'react-amap/lib/map';
import Marker from 'react-amap/lib/marker';
// ... your other code
```
以上为简单场景的应用。
**tips:** Map 组件的父元素须设置高度和宽度;关于代码中的 `Map` 组件的 `amapkey` 属性见下方的说明。
### CDN 用法
在 HTML 页面中加入 react-amap 库的 CDN 地址,插件会在 `window` 下暴露 `ReactAMAP` 变量。
```html
<script src="path/to/react.js"></script>
<script src="path/to/react-dom.js"></script>
<script src="path/to/dist/react-amap.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://elemefe.github.io/react-amap/articles/changelog)。
+ https://unpkg.com/react-amap@VERSION/dist/react-amap.js
+ https://unpkg.com/react-amap@VERSION/dist/react-amap.min.js
### 关于 Key
在上面的例子中需要给 Map 组件传入 `amapkey` 属性,这个是高德地图给开发者分配的开发者 Key;你可以在[高德开放平台](http://lbs.amap.com/faq/account/key/67)申请你自己的 Key。
在 react-amap 中 Key 的传入方式有两种:
+ 给 Map 组件传入 `amapkey` 属性(因为 React 框架本身对 `key` 属性有其他作用,所以不能用 `key`,所以我们用 `amapkey`),这样的缺点是如果多个地方使用就要每次都要传入;
+ 你也可以定义一个纯组件,把 Map 组件的 amapkey 属性写好后返回新组件。
+ 直接把你的 Key 定义在全局变量 `window.amapkey` 上,react-amap 在调用高德接口时会尝试从这里读取。(不推荐)
组件的使用请移步[组件文档](https://elemefe.github.io/react-amap/components/about)。
### 贡献指南
首先感谢你使用 react-amap,react-amap 是一个基于 React 封装的高德地图组件库。
react-amap 的成长离不开大家的支持,如果你愿意为 react-amap 贡献代码或提供建议,请阅读以下内容。
#### 开发
```shell
npm install
npm start # http://localhost:9001
```
#### Issue 规范
- issue 仅用于提交 Bug 或 Feature,其它内容可能会被直接关闭。
- 在提交 issue 之前,请搜索相关内容是否已被提出。
- 在提交issue时,请说明 react-amap 的版本号,并提供操作系统和浏览器信息。推荐使用 [JSFiddle](https://jsfiddle.net/ioslh/mxc0h16p/5/) 生成在线 demo,这能够更直观地重现问题。
#### Pull Request 规范
- 请先 fork 一份到自己的项目下,不要直接在仓库下建分支。
- **不要提交 `dist` 里面打包的文件**
- 提交 PR 前请 rebase,确保 commit 记录的整洁。
- 如果是修复 bug,请在 PR 中给出描述信息。
- 合并代码需要两名维护人员参与:一人进行 review 后 approve,另一人再次 review,通过后即可合并。
### 代码规范
遵循饿了么前端的 [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) 即可。
### License
[MIT License](https://github.com/ElemeFE/react-amap/blob/master/COPYING)
Copyright (c) 2017 ElemeFE
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
/* eslint-disable */
import React from 'react';
declare type AMapLngLat = {
getLng: Function,
getLat: Function,
};
declare type PureLngLat = {
longitude: number,
latitude: number,
};
declare type LngLat = PureLngLat & AMapLngLat;
declare type AMapSize = {
getWidth: Function,
getHeight: Function,
};
declare type PureSize = {
width: number,
height: number,
};
declare type Size = AMapSize & PureSize;
declare type AMapPixel = {
getX: Function,
getY: Function,
};
declare type PurePixel = [number, number];
declare type Pixel = AMapPixel & PurePixel;
declare type MarkerContent = string | HTMLElement;
declare type PolylinePath = Array<PureLngLat> & Array<AMapLngLat>;
declare type PolygonPath = PolylinePath | Array<PolylinePath>;
declare type EventMap = {[evName: string]: Function};
declare type MapLang = 'zh_cn' | 'zh_en' | 'en';
declare type MapFeature = 'bg' | 'point' | 'road' | 'building';
declare type MapProps = {
protocol?: string,
amapkey?: string,
version?: string,
useAMapUI?: boolean | Function,
onInstanceCreated?: Function,
children: React.Node,
events?: EventMap,
plugins?: Object,
loading: React.Node,
center?: LngLat,
zoom?: number,
zooms?: [number, number],
animateEnable?: boolean,
doubleClickZoom?: boolean,
dragEnable?: boolean,
isHotspot?: boolean,
jogEnable?: boolean,
keyboardEnable?: boolean,
resizeEnable?: boolean,
rotateEnable?: boolean,
scrollWheel?: boolean,
touchZoom?: boolean,
zoomEnable?: boolean,
showIndoorMap?: boolean,
expandZoomRange?: boolean,
viewMode?: '2D' | '3D',
features?: Array<MapFeature>,
pitch?: number,
mapStyle?: string,
labelzIndex?: number,
skyColor?: string,
buildingAnimation?: boolean,
pitchEnable?: boolean,
showBuildingBlock?: boolean,
indoorMap?: any,
cursor?: string,
layers?: Array<any>,
view?: any,
city?: string,
bounds?: any,
limitBounds?: any,
status?: any,
rotation?: number
// lang?: MapLang,
}
declare type MarkerProps = {
position?: LngLat,
offset?: Pixel,
onInstanceCreated?: Function,
icon?: any,
content?: MarkerContent,
className?: string,
draggable?: boolean,
visible?: boolean,
cursor?: string,
zIndex?: number,
angle?: number,
animation?: string,
markers?: Array<Object>,
shadow?: Object,
title?: string,
clickable?: boolean,
extData?: any,
label?: Object,
topWhenClick?: boolean,
bubble?: boolean,
raiseOnDrag?: boolean,
autoRotation?: boolean,
shape?: Object,
events?: Object,
render?: Function,
children?: any,
useCluster?: Object | boolean,
__map__: Object,
__ele__: HTMLDivElement,
};
declare type MapEvent = {
lnglat: AMapLngLat,
target: Object,
markers?: Array<Object>
};
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _withPropsReactive = require('../utils/withPropsReactive');
var _withPropsReactive2 = _interopRequireDefault(_withPropsReactive);
var _log = require('../utils/log');
var _log2 = _interopRequireDefault(_log);
var _common = require('../utils/common');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/*
* props
* {
* __map__ 父级组件传过来的地图实例
* }
*/
var configurableProps = ['center', 'radius', 'draggable', 'extData',
/* 原生的接口中并没有这些对象,这是本组件的扩展 */
'visible', 'style'];
var allProps = configurableProps.concat(['zIndex', 'bubble']);
var Circle = function (_React$Component) {
_inherits(Circle, _React$Component);
function Circle(props) {
_classCallCheck(this, Circle);
var _this = _possibleConstructorReturn(this, (Circle.__proto__ || Object.getPrototypeOf(Circle)).call(this, props));
if (typeof window !== 'undefined') {
if (!props.__map__) {
_log2.default.warning('MAP_INSTANCE_REQUIRED');