2gis-maps-react 中文文档教程

Question

React component Maps API 2GIS

Installation

安装使用命令 npm install 2gis-maps-react 2gis-maps

Getting started

Demo

演示
演示源代码

Creation of simple map. Api referense.

地图是一个基本组件。 要创建地图，您需要指定中心点、缩放级别和 dom 元素的大小。

  <Map
      style={{width: "500px", height: "500px"}}
      center={[54.98, 82.89]}
      zoom={13}
  />

Creation of popup inside the map. Api referense.

一个简单的弹出窗口。 对于 maxWidth、minWith 和 maxHeight 的设置，请使用 prop sprawling。 演示 Source code

  <Map
      style={{width: "500px", height: "500px"}}
      center={[54.98, 82.89]}
      zoom={13}
  >
    <Popup
        pos={[54.98, 82.89]}
    >
       The content for popup
        <h3>Can be HTML</h3>
    </Popup>
  </Map>

Creation of Markers and Popups on Markers. Api referense.

Simple Marker

  <Map
      style={{width: "500px", height: "500px"}}
      center={[54.98, 82.89]}
      zoom={13}
  >
    <Marker
        pos={[54.98, 82.89]}
    />
  </Map>

静态和可拖动标记。 标记上的弹出窗口。 演示 Source code

    <Map
        style={{width: "500px", height: "500px"}}
        center={[54.98, 82.89]}
        zoom={13}
    >
        <Marker
            pos={[54.98, 82.89]}
            staticLabel={'You can drag me.'}
            draggable={true}
        />
        <Marker
            pos={[54.98, 82.895]}
        >
            <Popup>
                The content for popup
                <h3>Can be HTML</h3>
            </Popup>
        </Marker>
    </Map>

带图标和 html 图标的标记。 演示 Source code

    <Map
        style={{width: "500px", height: "500px"}}
        center={[54.98, 82.89]}
        zoom={13}
    >
        <Marker
            pos={[54.98, 82.89]}
        >
            <Icon
                iconUrl={'http://maps.api.2gis.ru/2.0/example_logo.png'}
                iconSize={[54.98, 82.89]}
            />
        </Marker>

        <Marker
            pos={[54.98, 82.895]}
        >
            <DivIcon
                iconSize={[54.98, 82.89]}
            >
                <h2>Can be HTML</h2>
            </DivIcon>
        </Marker>
    </Map>

带有标签和静态标签的标记。 演示 Source code

    <Map
        style={{width: "500px", height: "500px"}}
        center={[54.98, 82.89]}
        zoom={13}
    >
        <Marker
            pos={[54.98, 82.89]}
            label={'I\'m label.'}
        />

        <Marker
            pos={[54.98, 82.895]}
            staticLabel={'I\'m static label.'}
        />
    </Map>

Creating of vector objects. Api referense.

Circle and Circle Marker. 演示 源代码

    <Map
        style={{width: "500px", height: "500px"}}
        center={[54.98, 82.89]}
        zoom={13}
    >
        <CircleMarker
            pos={[54.98, 82.89]}
            label={'I\'m Circle Marker.<br/>My radius doesn't change when zooming.<br/>He in pixels.'}
            radius={50}
        />

        <Circle
            pos={[54.98, 82.895]}
            label={'I\'m Circle.<br/>My radius changes when zooming.<br/>He in meters'}
            radius={200}
        />
    </Map>

多边形、折线和矩形。 演示 Source code

    <Map
        style={{width: "500px", height: "500px"}}
        center={[54.98, 82.89]}
        zoom={13}
    >
        <Polyline points={[
                [54.9827,82.8958],
                [54.9837,82.8968],
                [54.9837,82.8938]
            ]}
        />

        <Polygon points={[
                [54.98214514427189, 82.89540767669679],
                [54.981683400666896, 82.89724230766298],
                [54.982754637698605, 82.89746761322023]
            ]}
                style={{
                    color: '#00FF00'
            }}
        />

        <Rectangle bounds={[
                        [54.9827238554242, 82.89354085922243],
                        [54.98205895253545, 82.89488196372986]
                    ]}
                        style={{
                            color: '#FF0000'
                    }}
                />
    </Map>

Events

要绑定 2gis-mapsapi 事件，请使用类似于 onEvent 的道具，其中 Event 是带有大写字母的 2gis-mapsapi 事件第一个字符。

Components

Map

Required props

Prop name	Dynamic	Description	Data example
center	✓	Center position of map	[54.98, 82.89]
zoom	✓	Zoom level of map	15

Optional props

Prop name	Dynamic	Description	Data example	Default value
minZoom	✘	Minimal zoom level	10	null
maxZoom	✘	Maximal zoom level	20	null
maxBounds	✘	Bounds of map	[ [54.98, 82.89], [54.98, 82.89] ]	null
style	✓	CSS style of map container	{width: "500px", height: "500px"}	null
geoclicker	✘	Show popup on click about place on map	true	false
projectDetector	✘	Load current user project	true	false
zoomControl	✘	Show zoom control button	false	true
fullscreenControl	✘	Show fullscreen control button	false	true
preferCanvas	✘	Use canvas element for rendering geometry	false	true
touchZoom	✘	Zooming when touch (on mobile)	false	true
scrollWheelZoom	✘	Zooming when scrolling	false	true
doubleClickZoom	✘	Zooming when double click	false	true
dragging	✘	Dragging map	false	true

Popup

可以绑定到Marker, Map, Polygon, Polyline, Rectangle。

Required props

Prop name	Dynamic	Description	Data example
pos	✓	Position on map (not use if popup inside another element)	[54.98, 82.89]

Optional props

Prop name	Dynamic	Description	Data example	Default value
className	✘	Class name of popup dom element	example-string	-
maxWidth	✘	Max width of popup	150	300
minWidth	✘	Min width of popup	150	50
maxHeight	✘	Max height of popup	150	null
sprawling	✘	Popup width on map width	true	false

Marker

Required props

Prop name	Dynamic	Description	Data example
pos	✓	Position on map	[54.98, 82.89]

Optional props

Prop name	Dynamic	Description	Data example	Default value
label	✓	Text of marker label	[54.98, 82.89]	-
staticLabel	✓	Text of marker label. Label will be static.	[54.98, 82.89]	-
draggable	✓	Marker is draggable	true	false
clickable	✓	Marker is clickable	false	true

Icon

可以在Marker里面。

必需的 props

Prop name	Dynamic	Description	Data example
iconUrl	✓	Url of icon	http://maps.api.2gis.ru/2.0/example_logo.png
iconSize	✓	Size of icon	[48, 48]

DivIcon

可以在 Marker 里面。

必需道具

Prop name	Dynamic	Description	Data example	Default value
iconSize	✓	Size of icon	[48, 48]	-
dangerouslySetInnerHTML	✓	Inner html	http://maps.api.2gis.ru/2.0/example_logo.png	-

Ruler

必需道具

Prop name	Dynamic	Description	Data example
points	✓	Points of ruler	[ [54.9827,82.8958], [54.9837,82.8968], [54.9837,82.8938] ]

Polyline

必需道具

Prop name	Dynamic	Description	Data example
points	✓	Points of line	[ [54.9827,82.8958], [54.9837,82.8968], [54.9837,82.8938] ]

可选道具

Prop name	Dynamic	Description	Data example	Default value
label	✓	Text of label	example-string	-
style	✓	Style of line	{color: '#FF0000'}	-

Polygon

必需道具

Prop name	Dynamic	Description	Data example
points	✓	Points of polygon	[ [54.9827,82.8958], [54.9837,82.8968], [54.9837,82.8938] ]

可选道具

Prop name	Dynamic	Description	Data example	Default value
label	✓	Text of label	example-string	-
style	✓	Style of line	{color: '#FF0000'}	-

Rectangle

必需道具

Prop name	Dynamic	Description	Data example
bounds	✓	Bounds of rectangle	[ [54.9827,82.8958], [54.9837,82.8968] ]

可选道具

Prop name	Dynamic	Description	Data example	Default value
label	✓	Text of label	example-string	-
style	✓	Style of line	{color: '#FF0000'}	-

Circle

必需道具

Prop name	Dynamic	Description	Data example
pos	✓	Position on map	[54.9827,82.8958]
radius	✓	Circle radius in meters	300

可选道具

Prop name	Dynamic	Description	Data example	Default value
label	✓	Text of label	example-string	-
style	✓	Style of line	{color: '#FF0000'}	-

CircleMarker

必需道具

Prop name	Dynamic	Description	Data example
pos	✓	Position on map	[54.9827,82.8958]

可选道具

Prop name	Dynamic	Description	Data example	Default value
radius	✓	Circle radius in pixels	300	10
label	✓	Text of label	example-string	-
style	✓	Style of line	{color: '#FF0000'}	-

Wkt

必需道具

Prop name	Dynamic	Description	Data example
data	✓	Wkt data string	POLYGON((82.9155.04, 82.91 55.04, 82.91 55.04, 82.9155.04))

可选道具

Prop name	Dynamic	Description	Data example	Default value
style	✓	Style of objeck	{color: '#FF0000'}	-

GeoJSON

必需道具

Prop name	Dynamic	Description	Data example
data	✓	GeoJSON data object	{ "type": "Feature", "properties": { "address": "г. Новосибирск, пл. Карла Маркса, 7" }, "geometry": { "type": "Point", "coordinates": [82.8974, 54.9801] } };

可选道具

Prop name	Dynamic	Description	Data example	Default value
pointToLayer	✓	Function for render point	function() {}	Will be render simple Marker
onEachFeature	✓	Function running on every element	function() {}	-
filter	✓	Function for filter objects	function() {}	-
style	✓	Style of object	{color: '#FF0000'}	-

Demo Development Server

• npm start will run a development server with the component's demo app at http://localhost:3000 with hot module reloading.

Building

• npm run build 将构建组件以发布到 npm并捆绑演示应用程序。

• npm run clean 将删除构建的资源。