Skip to content

Latest commit

 

History

History
216 lines (171 loc) · 5.15 KB

README.md

File metadata and controls

216 lines (171 loc) · 5.15 KB

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

Circle class

This class extends BaseClass.

Contents

Overview

Create one polygon

The map.addCiecle() method adds one circle onto the map.

  • This method works after the MAP_READY event.
var GOOGLE = {"lat" : 37.422858, "lng" : -122.085065};
var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv);

map.addEventListener(plugin.google.maps.event.MAP_READY, function() {

  // Add circle
  map.addCircle({
    'center': GOOGLE,
    'radius': 300,
    'strokeColor' : '#AA00FF',
    'strokeWidth': 5,
    'fillColor' : '#880000'
  }, function(circle) {

    map.moveCamera({
      target: circle.getBounds()
    });

  });

});

Listen CLICK event

In order to listen the CIRCLE_CLICK event, you need to specify the clickable option. You can get the latitude/longitude pair of clicked position.

// Add a circle
map.addCircle({
  'center': GOOGLE,
  'radius': 300,
  'strokeColor' : '#AA00FF',
  'strokeWidth': 5,
  'fillColor' : '#880000',
  'clickable' : true   // default = false
}, function(circle) {

  map.moveCamera({
    target: circle.getBounds()
  });

  // Catch the CIRCLE_CLICK event
  circle.on(plugin.google.maps.event.CIRCLE_CLICK, onCircleClick);

});


// The CIRCLE_CLICK event passes to the callback
// with the latLng position where is you clicked.
function onCircleClick(latLng) {

  // The callback is called as the overlay instance.
  var circle = this;

  // Do something...
}

bindTo() method

Circle bindTo() method is useful when you manipulate multiple overlays with the same value. The bindTo() method comes from BaseClass.

map.addMarker({
  position: {lat: 43.0741704, lng: -89.3809802},
  draggable: true
}, function(marker) {

  map.addCircle({
    center: marker.getPosition(),
    radius: 10,
    fillColor: "rgba(0, 0, 255, 0.5)",
    strokeColor: "rgba(0, 0, 255, 0.75)",
    strokeWidth: 1
  }, function(circle) {

    // circle.center = marker.position
    marker.bindTo("position", circle, "center");
  });

});

API Reference

Create

map.addCircle() Add a circle.

Methods

setCenter() Change the center position.
getCenter() Return the current center position.
setRadius() Change the circle radius.
getRadius() Return the current circle radius.
setFillColor() Change the filling color (inner color).
getFillColor() Return the current circle filling color (inner color).
setStrokeWidth() Change the stroke width.
getStrokeWidth() Return the current circle stroke width (unit: pixel).
setStrokeColor() Change the stroke color (outter color).
getStrokeColor() Return the current circle stroke color (outer color).
setClickable() Change click-ability of the circle.
getClickable() Return true if the circle is clickable.
setZIndex() Change the circle zIndex order.
getZIndex() Return the current circle zIndex.
remove() Remove the circle.
getBounds() Return the latLngBounds (rectangle) that contains the circle.
getMap() Return the map reference.

Events

CIRCLE_CLICK Arguments: LatLng
This event is fired when you click on a circle.