Skip to content

Latest commit

 

History

History
283 lines (231 loc) · 6.99 KB

README.md

File metadata and controls

283 lines (231 loc) · 6.99 KB
Raw

⚠️ 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

Polyline class

This class extends BaseClass.

Contents

Overview

Create one polyline

The map.addPolyline() method draws one polyline onto the map.

  • This method works after the MAP_READY event.
var HND_AIR_PORT = {lat: 35.548852, lng: 139.784086};
var SFO_AIR_PORT = {lat: 37.615223, lng: -122.389979};
var HNL_AIR_PORT = {lat: 21.324513, lng: -157.925074};
var AIR_PORTS = [
  HND_AIR_PORT,
  HNL_AIR_PORT,
  SFO_AIR_PORT
];

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

// Create a map with specified camera bounds
var map = plugin.google.maps.Map.getMap(mapDiv, {
  camera: {
    target: AIR_PORTS
  }
});
map.addEventListener(plugin.google.maps.event.MAP_READY, function() {

  // Add a polyline
  map.addPolyline({
    points: AIR_PORTS,
    'color' : '#AA00FF',
    'width': 10,
    'geodesic': true
  });

});

Click event

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

// Add a polyline
map.addPolyline({
  points: AIR_PORTS,
  'color' : '#AA00FF',
  'width': 10,
  'geodesic': true,
  'clickable': true // default = false
}, function(polyline) {

  // Catch the POLYLINE_CLICK event
  polyline.on(plugin.google.maps.event.POLYLINE_CLICK, function(latLng) {

    map.addMarker({
      position: latLng,
      title: "You clicked on the polyline",
      snippet: latLng.toUrlValue(),
      disableAutoPan: true
    }, function(marker) {

      marker.showInfoWindow();
    });

  });

});

Update the polyline

The getPoints() method returns an instance of BaseArrayClass. If you change the element value of it, the polyline is also updated automatically. Also if you add new element, or remove one of them, the polyline is also updated.

// Add a polyline
map.addPolyline({
  'points': points,
  'color' : '#AA00FF',
  'width': 10,
  'geodesic': true
}, function(polyline) {

  // polyline.getPoints() returns an instance of BaseArrayClass.
  var mvcArray = polyline.getPoints();

  // Add draggable markers
  mvcArray.mapAsync(function(latLng, cb) {
    map.addMarker({
      position: latLng,
      draggable: true
    }, cb);
  }, function(markers) {

    // If a marker is dragged, set the position of it to the points of the Polygon.
    markers.forEach(function(marker, idx) {
      marker.on(plugin.google.maps.event.MARKER_DRAG, function(position) {
        mvcArray.setAt(idx, position);
      });
    });

  });
});

Assign your data

Since Polyline class extends BaseClass, you can assign your data.

const HND_AIR_PORT = {"lat": 35.548852, "lng": 139.784086};
const SFO_AIR_PORT = {"lat": 37.615223, "lng": -122.389979};
const HNL_AIR_PORT = {"lat": 21.332898, "lng": -157.921418};

//---------------------------------
// [Model]
//    Create one polyline
//---------------------------------
map.addPolyline({
  'points': [
    HND_AIR_PORT,
    HNL_AIR_PORT,
    SFO_AIR_PORT
  ],
  'color' : "red",
  'width': 10,
  'geodesic': true,
  'idx': 0
}, function(polyline) {

  //---------------------------------
  // [Control]
  //    Increment the idx field.
  //    If the value is grater than 3,
  //    reset to 0.
  //---------------------------------
  polyline.on(plugin.google.maps.event.POLYLINE_CLICK, function() {
    var idx = this.get("idx");
    idx = idx + 1;
    this.set("idx", idx > 3 ? 0 : idx);
  });

  //---------------------------------
  // [View]
  //    Update the polyline color
  //    based on the idx field.
  //---------------------------------
  polyline.on("idx_changed", function() {
    var idx = this.get("idx");
    this.setColor(["green", "blue", "orange", "red"][idx]);
  });
});

API Reference

Create

map.addPolyline() Add a polyline.

Methods

setPoints() Changes the polyline points.
getPoints() Returns an instance of the [BaseArrayClass](../../BaseArrayClass/index/README.md).
You can modify the points.
setGeodesic() When true, edges of the polyline are interpreted as geodesic and will follow the curvature of the Earth.
getGeodesic() Returns true if the polyline is geodesic.
setVisible() Changes visibility of the polyline.
getVisible() Returns true if the polyline is visible.
setClickable() Changes click-ability of the polyline.
getClickable() Returns true if the polyline is clickable.
setStrokeColor() Changes the polyline color.
getStrokeColor() Returns the current polyline color.
setStrokeWidth() Changes the polyline stroke width.
getStrokeWidth() Returns the current stroke width (unit: pixel).
setZIndex() Changes the polyline zIndex order.
getZIndex() Returns the current polyline zIndex.
remove() Removes the polyline.
getMap() Returns the map reference.

Events

POLYLINE_CLICK Arguments: LatLng
This event is fired when you click on the polyline.