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`.