Skip to content

Latest commit

 

History

History
200 lines (163 loc) · 4.87 KB

README.md

File metadata and controls

200 lines (163 loc) · 4.87 KB
Raw

💚 This is the latest document.

Circle class

This class extends BaseClass.

Contents

Overview

Create one circle

var GOOGLE = {"lat" : 37.422858, "lng" : -122.085065};
var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv);

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

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
var circle = map.addCircle({
  'center': GOOGLE,
  'radius': 300,
  'strokeColor' : '#AA00FF',
  'strokeWidth': 5,
  'fillColor' : '#880000',
  'clickable' : true   // default = false
});

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.

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

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

// 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() Enables or disables click events for this 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.