Implement PluginGroundOverlay.js
MODIFY
plugin.xml
plugin.xml
<?xml version='1.0' encoding='utf-8'?>
-<plugin id="cordova-plugin-googlemaps" version="2.3.12-ext-20180820-0109" 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-20180820-1337" 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/PluginGroundOverlay.js
src/browser/PluginGroundOverlay.js
var utils = require('cordova/utils'),
event = require('cordova-plugin-googlemaps.event'),
BaseClass = require('cordova-plugin-googlemaps.BaseClass'),
+ Spherical = require('cordova-plugin-googlemaps.spherical'),
LatLng = require('cordova-plugin-googlemaps.LatLng');
function PluginGroundOverlay(pluginMap) {
@@ -33,6 +34,9 @@ PluginGroundOverlay.prototype._create = function(onSuccess, onError, args) {
bounds.extend(latLng);
});
+ if ('bearing' in pluginOptions) {
+ groundoverlayOpts.bearing = pluginOptions.bearing;
+ }
if ('zIndex' in pluginOptions) {
groundoverlayOpts.zIndex = pluginOptions.zIndex;
}
@@ -50,7 +54,6 @@ PluginGroundOverlay.prototype._create = function(onSuccess, onError, args) {
groundoverlay.addListener('click', function(polyMouseEvt) {
self._onGroundOverlayEvent.call(self, groundoverlay, polyMouseEvt);
});
- console.log(groundoverlay);
self.pluginMap.objects[groundoverlayId] = groundoverlay;
self.pluginMap.objects['groundoverlay_property_' + groundoverlayId] = pluginOptions;
@@ -73,6 +76,25 @@ PluginGroundOverlay.prototype.setImage = function(onSuccess, onError, args) {
onSuccess();
};
+PluginGroundOverlay.prototype.setBearing = function(onSuccess, onError, args) {
+ var self = this;
+ var overlayId = args[0];
+ var groundOverlay = self.pluginMap.objects[overlayId];
+ if (groundOverlay) {
+ groundOverlay.setBearing(args[1]);
+ }
+ onSuccess();
+};
+
+PluginGroundOverlay.prototype.setOpacity = function(onSuccess, onError, args) {
+ var self = this;
+ var overlayId = args[0];
+ var groundOverlay = self.pluginMap.objects[overlayId];
+ if (groundOverlay) {
+ groundOverlay.setOpacity(args[1]);
+ }
+ onSuccess();
+};
PluginGroundOverlay.prototype.setBounds = function(onSuccess, onError, args) {
var self = this;
@@ -97,6 +119,7 @@ PluginGroundOverlay.prototype.remove = function(onSuccess, onError, args) {
if (groundOverlay) {
google.maps.event.clearInstanceListeners(groundOverlay);
groundOverlay.setMap(null);
+ groundOverlay.remove();
groundOverlay = undefined;
self.pluginMap.objects[overlayId] = undefined;
delete self.pluginMap.objects[overlayId];
@@ -139,32 +162,33 @@ function newGroundOverlay(url, bounds, options) {
function CustomGroundOverlay(url, bounds, options) {
google.maps.OverlayView.apply(this);
var self = this;
+
+ //------------------------------------------------------------
+ // Create an img element, then put it on map as GroundOverlay
+ //------------------------------------------------------------
var img = new Image();
- img.id="hogehoge";
img.src = url;
img.style.position = "absolute";
+ img.style.WebkitTransformOrigin = "50% 50%";
+ img.style.MozTransformOrigin = "50% 50%";
+ img.style.transformOrigin = "50% 50%";
self.set("img", img);
- google.maps.event.addDomListener(img, 'click', function(evt) {
- console.log(evt);
- if (self.get('clickable')) {
- var projection = self.getProjection();
- var latLng = projection.fromContainerPixelToLatLng(evt.clientX, evt.clientY);
- google.maps.event.trigger('click', {
- latLng: latLng
- });
- }
- });
self.set("url", url);
- self.addListener("url_changed", function(prevUrl, newUrl) {
- image.src = newUrl;
+ self.addListener("url_changed", function() {
+ img.src = self.get('url');
});
- self.set("sw", bounds.getSouthWest());
- self.set("ne", bounds.getNorthEast());
- self.addListener("sw_changed", self.draw);
- self.addListener("ne_changed", self.draw);
+ var path = new google.maps.MVCArray([
+ new google.maps.LatLng(0, 0),
+ new google.maps.LatLng(0, 0),
+ new google.maps.LatLng(0, 0),
+ new google.maps.LatLng(0, 0)
+ ]);
+ self.set('path', path);
+ self.addListener('bearing_changed', self.updateVertixes);
+ self.addListener('bounds_changed', self.updateVertixes);
self.addListener('opacity_changed', function() {
img.style.opacity = self.get('opacity');
});
@@ -172,34 +196,132 @@ function CustomGroundOverlay(url, bounds, options) {
img.style.zIndex = self.get('zIndex');
});
- var swMarker = new google.maps.Marker({
- position: bounds.getSouthWest(),
- 'title': "sw",
- 'map': options.map
+ //---------------------------------------------------------
+ // Create a transparent rectangle above the groundOverlay,
+ // then catch click event
+ //---------------------------------------------------------
+ var touchPolygon = new google.maps.Polygon({
+ 'map': options.map,
+ 'paths': path,
+ 'clickable': true,
+ 'fillColor': 'red',
+ 'fillOpacity': 0,
+ 'strokeOpacity': 0,
+ 'zIndex': options.zIndex || 0
+ });
+ self.addListener('zIndex_changed', function() {
+ touchPolygon.setOptions({
+ 'zIndex': self.get('zIndex')
+ });
});
- self.set('swMarker', swMarker);
- var neMarker = new google.maps.Marker({
- position: bounds.getNorthEast(),
- 'title': "ne",
- 'map': options.map
+ touchPolygon.addListener('click', function(evt) {
+ if (self.get('clickable')) {
+ google.maps.event.trigger(self, 'click', {
+ 'latLng': evt. latLng
});
- self.set('neMarker', neMarker);
+ }
+ });
+ self.set('touchPolygon', touchPolygon);
+
+ var markers = [];
+ for (var i = 0; i < 4; i++) {
+ markers.push(new google.maps.Marker({
+ 'position': {'lat': 0, 'lng': 0},
+ 'map': options.map
+ }));
+ }
+ self.set('markers', markers);
+
+ //---------------------------------------------------------
+ // Apply option values
+ //---------------------------------------------------------
for (var key in options) {
self.set(key, options[key]);
}
+ self.set('bounds', bounds);
+}
+CustomGroundOverlay.prototype.updateVertixes = function() {
+ var self = this;
+ var degree = self.get('bearing') || 0;
+
+ // Get center
+ var bounds = self.get('bounds');
+ if (!bounds) {
+ return;
}
+ var center = bounds.getCenter(),
+ centerPos = {
+ 'lat': center.lat(),
+ 'lng': center.lng()
+ };
+
+ // original NorthEast
+ var orgNE = bounds.getNorthEast(),
+ orgSW = bounds.getSouthWest(),
+ orgNEpos = {
+ 'lat': orgNE.lat(),
+ 'lng': orgNE.lng()
+ };
+ var orgDrgreeNE = Spherical.computeHeading(centerPos, orgNEpos);
+ var orgDrgreeSE = Spherical.computeHeading(centerPos, {
+ 'lat': orgSW.lat(),
+ 'lng': orgNE.lng()
+ });
+
+ var distanceCenter2NE = Spherical.computeDistanceBetween(orgNEpos, centerPos);
+ // new NorthEast
+ var newNE = Spherical.computeOffsetOrigin(centerPos, distanceCenter2NE, degree + orgDrgreeNE);
+
+ // new SourthEast
+ var newSE = Spherical.computeOffsetOrigin(centerPos, distanceCenter2NE, degree + orgDrgreeSE);
+ // new SourthWest
+ var newSW = Spherical.computeOffsetOrigin(centerPos, distanceCenter2NE, degree + orgDrgreeNE + 180);
+ // new SouthEast
+ var newNW = Spherical.computeOffsetOrigin(centerPos, distanceCenter2NE, degree + orgDrgreeSE + 180);
+
+ // Caclulate bounds
+ var path = self.get('path');
+ path.setAt(0, new google.maps.LatLng(newNE.lat, newNE.lng));
+ path.setAt(1, new google.maps.LatLng(newSE.lat, newSE.lng));
+ path.setAt(2, new google.maps.LatLng(newSW.lat, newSW.lng));
+ path.setAt(3, new google.maps.LatLng(newNW.lat, newNW.lng));
+
+ self.draw();
+};
+
+CustomGroundOverlay.prototype.remove = function() {
+ var self = this;
+ self.set('img', undefined);
+ google.maps.event.clearInstanceListeners(self);
+ google.maps.event.clearInstanceListeners(self.get('touchPolygon'));
+};
+
CustomGroundOverlay.prototype.setOpacity = function(opacity) {
var self = this;
self.get('img').style.opacity = opacity;
};
+CustomGroundOverlay.prototype.setBearing = function(bearing) {
+ var self = this;
+ self.set("bearing", bearing);
+};
+
CustomGroundOverlay.prototype.setBounds = function(bounds) {
var self = this;
- self.set("sw", bounds.getSouthWest());
- self.set("ne", bounds.getNorthEast());
+ self.set("bounds", bounds);
+};
+
+CustomGroundOverlay.prototype.setOpacity = function(opacity) {
+ var self = this;
+ self.set("opacity", opacity);
+};
+
+CustomGroundOverlay.prototype.setImage = function(url) {
+ var self = this;
+ self.set("url", url);
};
CustomGroundOverlay.prototype.getBounds = function() {
@@ -209,18 +331,26 @@ CustomGroundOverlay.prototype.getBounds = function() {
);
};
CustomGroundOverlay.prototype.draw = function() {
- var self = this,
+ var self = this;
projection = self.getProjection();
+ if (!projection) {
+ return;
+ }
+ var bounds = self.get('bounds'),
+ center = bounds.getCenter(),
+ img = self.get("img");
// Calculate positions
- var nePx = projection.fromLatLngToDivPixel(self.get("ne")),
- swPx = projection.fromLatLngToDivPixel(self.get("sw"));
+ var swPx = projection.fromLatLngToDivPixel(bounds.getSouthWest()),
+ nePx = projection.fromLatLngToDivPixel(bounds.getNorthEast());
- var img = self.get("img");
img.style.left = swPx.x + "px";
img.style.top = nePx.y + "px";
img.style.width = (nePx.x - swPx.x) + "px";
img.style.height = (swPx.y - nePx.y) + "px";
+ img.style.transform = 'rotate(' + self.get('bearing') + 'deg)';
+ img.style.WebkitTransform = 'rotate(' + self.get('bearing') + 'deg)';
+ img.style.MozTransform = 'rotate(' + self.get('bearing') + 'deg)';
};
CustomGroundOverlay.prototype.onAdd = function() {

Implement PluginGroundOverlay.js