react-fmap
fengmap for react
Using
- install
npm i react-fmap
- using in react
; { const mapProps = fmapID: 'wafer-beijing' appName:'北京威发新世纪' mapKey:'3e7dba2418ac46e1af5a1abf17082db2' height: 'calc(100vh - 254px)' ; return <div className="App"> <FMap ...mapProps/> </div> ; }notice: mapKey is key of FengMap.
Props
| Prop | default value | is required | description |
|---|---|---|---|
| url | dome url | false | fengmap.min.js |
| fmapID | true | feng map id | |
| appName | false | application name | |
| mapKey | true | feng map key | |
| onClick | false | a callback for click map | |
| className | false | map mount dom's class name | |
| width | false | map mount dom's width | |
| height | false | map mount dom's height | |
| defaultViewMode | top |
false | 3d or 2d, value of ['3d', 'top'] |
| mapOptions | false | new FMMap's other props | |
| textMarkers | [] |
false | text marker eg: {x, y, name[, z, ...]} |
| imageMarkers | [] |
false | image marker eg: {x, y, url[, z, ...]} |
| toolControl | null |
false | map control tool. eg: 2d or 3d tool |
| controlOptions | null |
false | map control options, eg: position or offset |
| offLineOptions | object | false | off line map props |
| popMarkers | null |
false | pop marker. props is controlOptions. |
| initialPosition | null |
false | initial move to position. |
| loadComplete | null |
false | map load complete function. |
| drawNaviLines | null |
false | [{lineStyle, startPoint, endPoint}] |
| rotate | 0 |
false | set map rotate angle |
| mapServerURL | false | set map server url | |
| mapThemeURL | false | set map theme url | |
| defaultThemeName | false | set map theme name |
offLineOptions
offLineOptions: mapServerURL: '' mapThemeURL: '' defaultThemeName: '' ...other props function
| name | props | return | description |
|---|---|---|---|
| setViewMode | mode: string ['top', '3d'] |
this.map | return fengmap object |
| setTheme | themeName: string | void | set map theme name |
| setPopMarker | options: {} |
popMarker |
pop mark on map. call popMarker.close() close pop marker |
| getSearchReq | (request, callback) | Array: FMap | search map. request is object.eg: {ID: ''} |
| onNavigation | options: {} |
FMap | get navigation object |
| onMapFunction | name[, options] | null | apply map function |
add text marker
thismap;add image marker
thismap;onMapFunction
thismap;fengmap.min.js
if localize fengmap.min.js, then copy `node_modules/react-fmap/js/fengmap.min.js` to src(or can reach at a dir).
then set `url`.