react-yandex-maps, Yandex映射用于响应的API绑定

分享于 

6分钟阅读

GitHub

  繁體 雙語
Yandex Maps API bindings for React
  • 源代码名称:react-yandex-maps
  • 源代码网址:http://www.github.com/gribnoysup/react-yandex-maps
  • react-yandex-maps源代码文档
  • react-yandex-maps源代码下载
  • Git URL:
    git://www.github.com/gribnoysup/react-yandex-maps.git
    Git Clone代码到本地:
    git clone http://www.github.com/gribnoysup/react-yandex-maps
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/gribnoysup/react-yandex-maps
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    react-yandex-maps

    用于响应的 Yandex映射 API

    安装

    npm install --save react-yandex-maps

    组件

    基本组件

    • <YMaps/> - 通过上下文提供带有yandex映射api的子组件
    • <Map/> - 映射实例
    • <Clusterer/> - Clusterer实例
    • <ObjectManager/> - ObjectManager实例
    • <GeoObject/> - 通用GeoObject实例
    • <Control/> - 泛型控件实例

    GeoObject shorthands

    • <Placemark/>
    • <Polyline/>
    • <Rectangle/>
    • <Polygon/>
    • <Circle/>

    控制 shorthands

    • <Button/>
    • <FullscreenControl/>
    • <GeolocationControl/>
    • <RouteEditor/>
    • <RulerControl/>
    • <SearchControl/>
    • <TrafficControl/>
    • <TypeSelector/>
    • <ZoomControl/>
    • <ListBox/>
    • <ListBoxItem/>

    基本用法( 与yandex映射快速入门指南 )

    带有Yandex映射API的

    window.ymaps.ready(function () {
     constmyMap=newwindow.ymaps.Map('map', {
     center: [55.751574, 37.573856],
     zoom:9 }, {
     searchControlProvider:'yandex#search' })
     constmyPlacemark=newwindow.ymaps.Placemark([55.751574, 37.573856], {
     hintContent:'Собственный значок метки',
     balloonContent:'Это красивая метка' }, {
     iconLayout:'default#image',
     iconImageHref:'images/myIcon.gif',
     iconImageSize: [30, 42],
     iconImageOffset: [-3, -42]
     })
     myMap.geoObjects.add(myPlacemark)
    })

    带react-yandex-maps的

    import { YMaps, Map, Placemark } from'react-yandex-maps';constmapState= { center: [55.76, 37.64], zoom:10 };constMyPlacemark= () => (
     <YMaps><Map state={mapState}><Placemark
     geometry={{
     coordinates: [55.751574, 37.573856]
     }}
     properties={{
     hintContent:'Собственный значок метки',
     balloonContent:'Это красивая метка' }}
     options={{
     iconLayout:'default#image',
     iconImageHref:'images/myIcon.gif',
     iconImageSize: [30, 42],
     iconImageOffset: [-3, -42]
     }}
     /></Map></YMaps>);

    企业

    react-yandex-maps 库还支持企业版的Yandex.Maps API:

     <YMapsenterprisequery={{apikey:'//your api key here', }}/>

    事件

    所有对象事件都可用,只需使用camelCase事件名称而不是默认事件名( 例如 geometrychange -> onGeometryChange ) :

    带有Yandex映射API的

    functiononGeometryChange() {/* more code */}constcircle=newwindow.ymaps.GeoObject({
     geometry: {
     type:"Circle",
     coordinates: [55.76, 37.64],
     radius:10000 }
    })circle.events.add('geometrychange', handleEventSomehow)

    带react-yandex-maps的

    import { Circle } from'react-yandex-maps'constCircleWithEvents= ({onGeometryChange}) => (
     <Circle
     geometry={{
     coordinates: [55.76, 37.64],
     radius:10000 }}
     onGeometryChange={onGeometryChange}
     />)

    instanceRef 回调属性

    react-yandex-maps 支持特殊属性,[works similar] ( https://facebook.github.io/react/docs/refs-and-the-dom.html ) 用于响应 ref 属性。 react-yandex-maps 将在组件装载时使用YandexMap对象实例调用 instanceRef 回调,并在卸载时使用 null 调用它。

    更多示例

    你可以转到 https://gribnoysup.github.io/react-yandex-maps/ 查看示例,或者克隆这里 repo,cd 到 repo 文件夹并运行 npm start

    git clone https://github.com/gribnoysup/react-yandex-maps.gitcd./react-yandex-maps
    npm install && npm run examples

    待办事项

    • 添加测试
    • 添加更多 propTypes
    • 添加更多示例

    确认

    感谢 @effrenus 和他的 yandex-map-react


    API  react  BIN  bindings  Yandex  yandex-maps  
    相关文章