google maps draw shape lib

Google地圖繪製形狀庫

google-maps-draw-shape-lib是在一小部分Google Maps API上寫的JavaScript庫，可讓您在Google Map上繪製多邊形形狀並獲得其坐標。

安裝

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-React-React（源）

執照

麻省理工學院