google maps draw shape lib

Google지도는 모양 라이브러리를 그립니다

google-maps-draw-shape-lib 는 Google지도 API의 작은 세트에 쓰여진 JavaScript 라이브러리로 Google지도를 통해 다각형 모양을 그릴 수 있으며 좌표를 얻을 수 있습니다.

설치하다

npm i google-maps-draw-shape-lib

용법

 import MapDrawShapeManager from 'google-maps-draw-shape-lib' ;

// Google Maps JavaScript API instance
const map = new google . maps . Map ( element , mapOptions ) ;
// Callback function that will be called when user create or delete shape 
const onDrawCallback = ( shape ) => console . log ( shape ) ;
// Flag indicating whether it should set Drawing Mode enabled
const drawingMode = false ;
// Flag indicating whether it should set Draw Free Hand Mode enabled
const drawFreeHandMode = false ;
// Object containing the google polygon options to be used when drawing
const polygonOptions = {
  clickable : false ,
  fillColor : "#303030" ,
  fillOpacity : 0.1 ,
  strokeColor : "#000000" ,
  strokeWeight : 4 ,
  strokeOpacity : 1
} ;
// String with the inner HTML of the draw initial point overlay 
const initialPointInnerHtml = `<button class="your-custom-initial-point-class" title="Initial Point"></button>` ;
// String with the inner HTML of the draw delete point overlay 
const deletePointInnerHtml = `<button class="your-custom-delete-point-class" title="Delete">X</button></div>` ;

// Create Google Maps Draw Shape Library instance
const manager = new MapDrawShapeManager (
  map ,
  onDrawCallback , 
  drawingMode ,
  drawFreeHandMode ,
  polygonOptions ,
  initialPointInnerHtml ,
  deletePointInnerHtml
) ;

// Example of shape returned on callback function
const initalShape = [
  { lat : 38.71755745031312 , lng : - 9.34395756832437 } ,
  { lat : 39.780999209652855 , lng : - 8.82210698238687 } ,
  { lat : 38.91016617157451 , lng : - 6.82259526363687 } ,
  { lat : 38.71755745031312 , lng : - 9.34395756832437 }
] ;

// Draws the input shape on the map
manager . initDrawnShape ( initalShape ) ;

// Clears the drawn shape
manager . resetDrawnShape ( ) ;

// Sets the draw mode to drag instead of click if drawFreeHandMode flag is true
manager . setDrawFreeHandMode ( drawFreeHandMode ) ;

// Sets the map on draw mode if drawingMode flag is true
manager . setDrawingMode ( drawingMode ) ; 

예

React에서 사용되는이 라이브러리의 예 : Google-Maps-Draw Shape-React (Source)

특허

MIT