react-hotels-on-map
所属分类：聚类算法
开发工具：JavaScript
文件大小：22KB
下载次数：0
上传日期：2016-12-02 16:18:30
上 传 者：
sh-1993
说明： 在谷歌地图上显示一组酒店作为聚集标记，每个酒店都有一个显示酒店摘要的信息窗口
(Presents a set of hotels as clustered markers on Google Map, each with an info window displaying the hotel summary)
文件列表:
.babelrc (37, 2016-12-03)
.eslintignore (23, 2016-12-03)
.eslintrc (4045, 2016-12-03)
.npmignore (34, 2016-12-03)
.travis.yml (88, 2016-12-03)
LICENSE (1082, 2016-12-03)
package.json (1794, 2016-12-03)
src (0, 2016-12-03)
src\MarkerClusterer.js (33826, 2016-12-03)
src\defaultMapConfiguration.js (281, 2016-12-03)
src\demo.js (990, 2016-12-03)
src\demoData.js (11713, 2016-12-03)
src\hotelInfoHtml.js (697, 2016-12-03)
src\index.js (2333, 2016-12-03)
src\marker.js (152, 2016-12-03)
tests (0, 2016-12-03)
tests\defaultMapConfiguration.spec.js (584, 2016-12-03)
tests\helpers (0, 2016-12-03)
tests\helpers\jsdom-bootstrap.js (217, 2016-12-03)
tests\helpers\mapify.js (355, 2016-12-03)
tests\helpers\massert.js (629, 2016-12-03)
tests\hotelInfoHtml.spec.js (1464, 2016-12-03)
tests\index.spec.js (900, 2016-12-03)
tests\marker.spec.js (758, 2016-12-03)
www (0, 2016-12-03)
www\demo (0, 2016-12-03)
www\demo\index.html (412, 2016-12-03)
[](https://travis-ci.org/ikr/react-hotels-on-map)
# Summary
Presents a set of hotels as clustered markers on Google Map, each with an info window displaying the
hotel summary. That's a very simple, narrowly specialized component, tailored for hotels. If you
need something more general, take a look at
[react-google-maps](https://github.com/tomchentw/react-google-maps). Yet another difference from
`react-google-maps` is the React 0.13 support: `react-google-maps` v4+, which is capable of
clustering map markers, requires React 0.14.
# Usage
```javascript
import React from 'react';
import HotelsOnMap from 'hotels-on-map';
const props = {hotels: [{
ratingStars: 5,
name: 'Hotel InterContinental Geneve',
streetAddress: 'Chemin du Petit-Saconnex 7-9',
postalCode: '1209',
cityLocalized: 'Geneve',
geolocation: {latitude: 46.22425, longitude: 6.132383}
}, {
ratingStars: 3,
name: 'Hotel Eden',
streetAddress: 'Rue de Lausanne 135',
postalCode: '1202',
cityLocalized: 'Geneve',
geolocation: {latitude: 46.221928, longitude: 6.148965}
}/* ... */]};
React.render(
,
global.document.getElementById('root')
);
```
The code above will display and cluster all the hotel markers on the map, making sure that all the
clustered markers are visible. On a marker click, an info-window with the short hotel information
will be displayed.
You're encouraged to also set the `markerClusterImageUrlPrefix` prop value, and host the cluster
images on your own Web property. The default value is
`https://www.swisshotels.com/client-side-public/img/markerclustererplus/m`, giving you those:
## One hotel case
When the length of the `hotels` array is `1`, an info window for the single hotel is displayed
immediately, saving the user a marker click.
# Demo
See the [short example code](https://github.com/ikr/react-hotels-on-map/blob/master/src/demo.js)
with that [sample data](https://github.com/ikr/react-hotels-on-map/blob/master/src/demoData.js)
running [live here.](https://ikr.su/h/react-hotels-on-map/demo/)
近期下载者：
相关文件：
收藏者：