-
Notifications
You must be signed in to change notification settings - Fork 918
Polygon
###Add a polygon The map.addPolygon() method takes a single polygon options object literal, specifying the initial properties of the polygon.
The following fields are available when constructing a polygon:
Field Name | Type | Description |
---|---|---|
points | Array.LatLng | The array of LatLng position. |
geodesic | Boolean | Indicates whether the segments of the polygon should be drawn as geodesics, as opposed to straight lines on the Mercator projection. |
strokeColor | String | Specify the border color of the polygon. You can specify the HTML colors |
strokeWidth | Number | The width of border. |
fillColor | String | Specify the inside color of the polygon. You can specify the HTML colors |
visible | Boolean | Set false if you want to hide. (Default: true) |
zIndex | Number | Specify the zIndex. (Default: 2) |
addHole | Array.LatLng | The array of LatLng position (currently only Android, iOS coming soon) |
document.addEventListener("deviceready", function() {
var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv);
map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
const GORYOKAKU_POINTS = [
new plugin.google.maps.LatLng(41.79883, 140.75675),
new plugin.google.maps.LatLng(41.799240000000005, 140.75875000000002),
new plugin.google.maps.LatLng(41.797650000000004, 140.75905),
new plugin.google.maps.LatLng(41.79637, 140.76018000000002),
new plugin.google.maps.LatLng(41.79567, 140.75845),
new plugin.google.maps.LatLng(41.794470000000004, 140.75714000000002),
new plugin.google.maps.LatLng(41.795010000000005, 140.75611),
new plugin.google.maps.LatLng(41.79477000000001, 140.75484),
new plugin.google.maps.LatLng(41.79576, 140.75475),
new plugin.google.maps.LatLng(41.796150000000004, 140.75364000000002),
new plugin.google.maps.LatLng(41.79744, 140.75454000000002),
new plugin.google.maps.LatLng(41.79909000000001, 140.75465),
new plugin.google.maps.LatLng(41.79883, 140.75673)
];
map.addPolygon({
'points': GORYOKAKU_POINTS,
'strokeColor' : '#AA00FF',
'strokeWidth': 5,
'fillColor' : '#880000'
}, function(polygon) {
map.animateCamera({
'target': polygon.getPoints()
});
});
});
});
###callback The map.addPolygon() method takes a callback function as the second argument. The callback function is involved when the polygon is created on the map. You can get the instance of the polygon from the argument of the callback function.
map.addPolygon({
'points': GORYOKAKU_POINTS,
'strokeColor' : '#AA00FF',
'strokeWidth': 5,
'fillColor' : '#880000'
}, function(polygon) {
setTimeout(function() {
polygon.remove();
}, 3000);
});
###Remove the polygon To remove a polygon from the map, call the remove() method.
polygon.remove();
###Click Event
As of version1.1.4, you can listen the click event using OVERLAY_CLICK
event.
map.addPolygon({
'points': GORYOKAKU_POINTS,
'strokeColor' : '#AA00FF',
'strokeWidth': 5,
'fillColor' : '#880000'
}, function(polygon) {
polygon.on(plugin.google.maps.event.OVERLAY_CLICK, function(overlay, latLng) {
polygon.setFillColor("blue");
polygon.setStrokeColor("green");
polygon.setStrokeWidth(10);
});
});
Method | Return value | Description |
---|---|---|
getPoints() | Array.LatLng | Return the array of positions. |
getStrokeColor() | String | Return the stroke color.. |
getFillColor() | String | Return the fill color. |
getStrokeWidth() | Number | Return the border width. |
getGeodesic() | Boolean | Return true if the polygon is drawn as geodesic. |
getVisible() | Boolean | Return true if the polygon is visible. |
getZIndex() | Boolean | Return zIndex. |
remove() | void | Remove the polygon. |
setPoints(Array.LatLng) | void | Set the points. |
setStrokeColor(String) | void | Set the border color. |
setFillColor(String) | void | Set the fill color. |
setStrokeWidth(Number) | void | Set the border width. |
setVisible(Boolean) | void | Set false if you want to hide. |
setZIndex(Number) | void | Set the zIndex. |
setGeodesic(Boolean) | void | Set true if you want to draw the polygon as geodesic. |
getMap() | Map | Return the map instance. |
If you get an error, feel free to ask me on the official community or the issue list.
New version 2.0-beta2 is available.
The cordova-googlemaps-plugin v2.0 has more faster, more features.
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v2.0.0/README.md
New versions will be announced through the official community. Stay tune!
Feel free to ask me on the issues tracker.
Or on the official community is also welcome!
New version 2.0-beta2 is available.
The cordova-googlemaps-plugin v2.0 has more faster, more features.
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v2.0.0/README.md