Skip to content

Latest commit

 

History

History
269 lines (223 loc) · 7.41 KB

README.md

File metadata and controls

269 lines (223 loc) · 7.41 KB
Raw

⚠️ This document is aim for older versions (from 2.3.0 to 2.5.3). Document for new version is https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md

Polygon class

This class extends BaseClass.

Contents

Overview

Create one polygon

The map.addPolygon() method draws one polygon onto the map.

var GORYOKAKU_POINTS = [
  {lat: 41.79883, lng: 140.75675},
  {lat: 41.799240000000005, lng: 140.75875000000002},
  {lat: 41.797650000000004, lng: 140.75905},
  {lat: 41.79637, lng: 140.76018000000002},
  {lat: 41.79567, lng: 140.75845},
  {lat: 41.794470000000004, lng: 140.75714000000002},
  {lat: 41.795010000000005, lng: 140.75611},
  {lat: 41.79477000000001, lng: 140.75484},
  {lat: 41.79576, lng: 140.75475},
  {lat: 41.796150000000004, lng: 140.75364000000002},
  {lat: 41.79744, lng: 140.75454000000002},
  {lat: 41.79909000000001, lng: 140.75465},
  {lat: 41.79883, lng: 140.75673}
];
var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv, {
  camera: {
    target: GORYOKAKU_POINTS
  }
});

// Add polygon
var polygon = map.addPolygon({
  'points': GORYOKAKU_POINTS,
  'strokeColor' : '#AA00FF',
  'strokeWidth': 5,
  'fillColor' : '#880000'
});

Click event

The POLYGON_CLICK event is fired when you tap on the polygon with clicked position (LatLng object);

// Add a polygon
var polygon = map.addPolygon({
  'points': GORYOKAKU_POINTS,
  'strokeColor' : '#AA00FF',
  'strokeWidth': 5,
  'fillColor' : '#880000',
  'clickable' : true  // default = false
});

// Catch the POLYGON_CLICK event
polygon.on(plugin.google.maps.event.POLYGON_CLICK, function(latLng) {

  // You can change the style for instance.
  polygon.setFillColor("blue");
  polygon.setStrokeColor("green");
  polygon.setStrokeWidth(10);

  var marker = map.addMarker({
    position: latLng,
    title: "You clicked here on the polygon!",
    snippet: latLng.toUrlValue()
  });

  marker.showInfoWindow();

});

Create polygon with holes

You can create holes inside the polygon.

var points = [
  {lat: 41.79873502198214,lng: 140.75676172883607},    // A(Blue)
  {lat: 41.79916701538921, lng: 140.75850996560666},   // B
    ...
  {lat: 41.79898498098061, lng: 140.75494811176304},   // W
  {lat: 41.79872702373399, lng: 140.7566860846557}     // X
];

var holes = [[
  {lat: 41.795692, lng: 140.756214},  // A(Yellow)
  {lat: 41.795492, lng: 140.756150},  // B
  {lat: 41.795556, lng: 140.757813},  // C
    ...
  {lat: 41.796004, lng: 140.755517},  // W
  {lat: 41.795684, lng: 140.756225}   // X
], [
  {lat: 41.79509359115337,  lng: 140.7559088009109},   // A(GREEN)
  {lat: 41.795123461144776, lng: 140.75608584124757},  // B
  {lat: 41.79546948885738,  lng: 140.7556779973297},   // C
  {lat: 41.79554756063853,  lng: 140.7555651964035},   // D
  {lat: 41.795647713509155, lng: 140.7550391871414},   // E
  {lat: 41.794831758258425, lng: 140.75507730157472}   // F
]];

var div = document.getElementById("map_canvas");

// Initialize the map view
var map = plugin.google.maps.Map.getMap(div, {
  'camera' : {
    target: points
  }
});

var polygon = map.addPolygon({
  points: points,
  holes: holes,
  strokeColor: "blue",
  strokeWidth: 4,
  fillColor: "#FF0000AA"
});

When you want to create multiple holes in the polygon, direction of vertexes are very important.

When you create outer path with clockwise,

the first hole path must be counterclockwise.

If you want to create second hole, the path must be clockwise.

API Reference

Create

map.addPolygon() Add a polygon.

Methods

setPoints() Change the polygon points.
getPoints() Return an instance of the BaseArrayClass.
You can modify the points.
setHoles() Change the polygon holes.
getHoles() Return an instance of the BaseArrayClass.
You can modify the holes.
setFillColor() Change the filling color (inner color).
getFillColor() Return the current polygon filling color (inner color).
setStrokeWidth() Changes the polygon stroke width.
getStrokeWidth() Returns the current stroke width (unit: pixel).
setStrokeColor() Change the stroke color (outter color).
getStrokeColor() Return the current polygon stroke color (outer color).
setClickable() Change clickablity of the polygon.
getClickable() Return true if the polygon is clickable.
setVisible() Change visibility of the polygon.
getVisible() Return true if the polygon is visible.
setGeodesic() When true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth.
getGeodesic() Returns true if the polygon is geodesic.
setZIndex() Change the polygon zIndex order.
getZIndex() Return the current polygon zIndex.
remove() Remove the polygon.
getMap() Return the map reference.

Events

POLYGON_CLICK Arguments: LatLng
This event is fired when you click on a polygon.