Creating PluginPolyline.js
MODIFY
plugin.xml
plugin.xml
<?xml version='1.0' encoding='utf-8'?>
-<plugin id="cordova-plugin-googlemaps" version="2.3.12-ext-20180813-1632" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
+<plugin id="cordova-plugin-googlemaps" version="2.3.12-ext-20180814-1511" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>cordova-plugin-googlemaps</name>
<js-module name="BaseClass" src="www/BaseClass.js">
<runs/>

MODIFY
src/browser/PluginPolyline.js
src/browser/PluginPolyline.js
@@ -25,144 +25,47 @@ PluginPolyline.prototype._create = function(onSuccess, onError, args) {
var polylineOpts = {
'overlayId': polylineId,
- 'position': pluginOptions.position,
'map': map,
- 'disableAutoPan': pluginOptions.disableAutoPan === true,
- 'draggable': pluginOptions.draggable === true
+ 'path': new google.maps.MVCArray()
};
- var iconSize = null;
- if (pluginOptions.animation) {
- polylineOpts.animation = google.maps.Animation[pluginOptions.animation.toUpperCase()];
+
+ if (pluginOptions.points) {
+ pluginOptions.points.forEach(function(point) {
+ polylineOpts.path.push(new google.maps.LatLng(point.lat, point.lng));
+ });
}
- if (pluginOptions.icon) {
- var icon = pluginOptions.icon;
- polylineOpts.icon = {};
- if (typeof pluginOptions.icon === 'string') {
- // Specifies path or url to icon image
- polylineOpts.icon = pluginOptions.icon;
- } else if (typeof pluginOptions.icon === 'object') {
- if (Array.isArray(pluginOptions.icon.url)) {
- // Specifies color name or rule
- polylineOpts.icon = {
- 'path': 'm12 0c-4.4183 2.3685e-15 -8 3.5817-8 8 0 1.421 0.3816 2.75 1.0312 3.906 0.1079 0.192 0.221 0.381 0.3438 0.563l6.625 11.531 6.625-11.531c0.102-0.151 0.19-0.311 0.281-0.469l0.063-0.094c0.649-1.156 1.031-2.485 1.031-3.906 0-4.4183-3.582-8-8-8zm0 4c2.209 0 4 1.7909 4 4 0 2.209-1.791 4-4 4-2.2091 0-4-1.791-4-4 0-2.2091 1.7909-4 4-4z',
- 'fillColor': 'rgb(' + pluginOptions.icon.url[0] + ',' + pluginOptions.icon.url[1] + ',' + pluginOptions.icon.url[2] + ')',
- 'fillOpacity': pluginOptions.icon.url[3] / 256,
- 'scale': 1.3,
- 'strokeWeight': 0,
- 'anchor': new google.maps.Point(12, 27)
- };
- iconSize = {
- 'width': 22,
- 'height': 28
- };
- } else {
- polylineOpts.icon.url = pluginOptions.icon.url;
- if (pluginOptions.icon.size) {
- polylineOpts.icon.scaledSize = new google.maps.Size(icon.size.width, icon.size.height);
- iconSize = icon.size;
+ if (Array.isArray(pluginOptions.color)) {
+ polylineOpts.strokeColor = 'rgb(' + pluginOptions.color[0] + ',' + pluginOptions.color[1] + ',' + pluginOptions.color[2] + ')';
+ polylineOpts.strokeOpacity = pluginOptions.color[3] / 256;
}
+ if ('width' in pluginOptions) {
+ polylineOpts.strokeWeight = pluginOptions.width;
}
+ if ('zIndex' in pluginOptions) {
+ polylineOpts.zIndex = pluginOptions.zIndex;
}
-
- if (icon.anchor) {
- polylineOpts.icon.anchor = new google.maps.Point(icon.anchor[0], icon.anchor[1]);
+ if ('visible' in pluginOptions) {
+ polylineOpts.visible = pluginOptions.visible;
}
+ if ('geodesic' in pluginOptions) {
+ polylineOpts.geodesic = pluginOptions.geodesic;
}
- if (!polylineOpts.icon ||
- !polylineOpts.icon.url && !polylineOpts.icon.path) {
- // default polyline
- polylineOpts.icon = {
- 'path': 'm12 0c-4.4183 2.3685e-15 -8 3.5817-8 8 0 1.421 0.3816 2.75 1.0312 3.906 0.1079 0.192 0.221 0.381 0.3438 0.563l6.625 11.531 6.625-11.531c0.102-0.151 0.19-0.311 0.281-0.469l0.063-0.094c0.649-1.156 1.031-2.485 1.031-3.906 0-4.4183-3.582-8-8-8zm0 4c2.209 0 4 1.7909 4 4 0 2.209-1.791 4-4 4-2.2091 0-4-1.791-4-4 0-2.2091 1.7909-4 4-4z',
- 'fillColor': 'rgb(255, 0, 0)',
- 'fillOpacity': 1,
- 'scale': 1.3,
- 'strokeWeight': 0,
- 'anchor': new google.maps.Point(12, 27)
- };
- iconSize = {
- 'width': 22,
- 'height': 28
- };
+ if ('clickable' in pluginOptions) {
+ polylineOpts.clickable = pluginOptions.clickable;
}
- var polyline = new google.maps.polyline(polylineOpts);
- polyline.addListener('click', self._onpolylineEvent.bind(self, polyline, event.polyline_CLICK));
- polyline.addListener('dragstart', self._onpolylineEvent.bind(self, polyline, event.polyline_DRAG_START));
- polyline.addListener('drag', self._onpolylineEvent.bind(self, polyline, event.polyline_DRAG));
- polyline.addListener('dragend', self._onpolylineEvent.bind(self, polyline, event.polyline_DRAG_END));
- if (pluginOptions.title || pluginOptions.snippet) {
- var html = [];
- if (pluginOptions.title) {
- html.push(pluginOptions.title);
- }
- if (pluginOptions.snippet) {
- html.push('<small>' + pluginOptions.snippet + '</small>');
- }
- polyline.set('content', html.join('<br>'));
- polyline.addListener('click', onpolylineClick);
- }
+ var polyline = new google.maps.Polyline(polylineOpts);
+ polyline.addListener('click', function(polyMouseEvt) {
+ self._onPolylineEvent.call(self, polyline, polyMouseEvt);
+ });
self.pluginMap.objects[polylineId] = polyline;
self.pluginMap.objects['polyline_property_' + polylineId] = polylineOpts;
- if (iconSize) {
onSuccess({
- 'id': polylineId,
- 'width': iconSize.width,
- 'height': iconSize.height
+ 'id': polylineId
});
- } else {
- var img = new Image();
- img.onload = function() {
- console.log(polylineId, img.width, img.height);
- onSuccess({
- 'id': polylineId,
- 'width': img.width,
- 'height': img.height
- });
- };
- img.onerror = function() {
- onSuccess({
- 'id': polylineId,
- 'width': 20,
- 'height': 42
- });
- };
- if (typeof polylineOpts.icon === "string") {
- img.src = polylineOpts.icon;
- } else {
- img.src = polylineOpts.icon.url;
- }
- }
-};
-PluginPolyline.prototype.setTitle = function(onSuccess, onError, args) {
- var self = this;
- var overlayId = args[0];
- var title = args[1];
- var polyline = self.pluginMap.objects[overlayId];
- polyline.set('content', title);
- onSuccess();
-};
-
-PluginPolyline.prototype.showInfoWindow = function(onSuccess, onError, args) {
- var self = this;
- var overlayId = args[0];
- var polyline = self.pluginMap.objects[overlayId];
- if (polyline) {
- onpolylineClick.call(polyline);
- }
- onSuccess();
-};
-PluginPolyline.prototype.setPosition = function(onSuccess, onError, args) {
- var self = this;
- var overlayId = args[0];
- var polyline = self.pluginMap.objects[overlayId];
- if (polyline) {
- polyline.setPosition({'lat': args[1], 'lng': args[2]});
- }
- onSuccess();
};
-
PluginPolyline.prototype.remove = function(onSuccess, onError, args) {
var self = this;
var overlayId = args[0];
@@ -177,34 +80,16 @@ PluginPolyline.prototype.remove = function(onSuccess, onError, args) {
onSuccess();
};
-PluginPolyline.prototype._onpolylineEvent = function(polyline, evtName) {
+PluginPolyline.prototype._onPolylineEvent = function(polyline, polyMouseEvt) {
var self = this,
mapId = self.pluginMap.id;
-console.log(mapId, evtName);
if (mapId in plugin.google.maps) {
- var latLng = polyline.getPosition();
plugin.google.maps[mapId]({
- 'evtName': evtName,
- 'callback': '_onpolylineEvent',
- 'args': [polyline.overlayId, new LatLng(latLng.lat(), latLng.lng())]
+ 'evtName': event.POLYLINE_CLICK,
+ 'callback': '_onOverlayEvent',
+ 'args': [polyline.overlayId, new plugin.google.maps.LatLng(polyMouseEvt.latLng.lat(), polyMouseEvt.latLng.lng())]
});
}
};
module.exports = PluginPolyline;
-
-var infoWnd = null;
-function onpolylineClick() {
- if (!infoWnd) {
- infoWnd = new google.maps.InfoWindow();
- }
- var polyline = this;
- var maxWidth = polyline.getMap().getDiv().offsetWidth * 0.7;
- var content = polyline.get('content');
- infoWnd.setOptions({
- content: content,
- disableAutoPan: polyline.disableAutoPan,
- maxWidth: maxWidth
- });
- infoWnd.open(polyline.getMap(), polyline);
-}

Creating PluginPolyline.js