Polyline_click not fired or fired in a wrong place with a lot of different drawed polylines #2845
Description
I'm submitting a ... (check one with "x")
- question
- any problem or bug report
OS: (check one with "x")
- Android
- iOS
- Browser
cordova information: (run $> cordova plugin list)
com.googlemaps.ios 3.9.0 "Google Maps SDK for iOS"
cordova-pdf-generator 2.1.1 "PDFGenerator"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-background-geolocation 3.1.0 "CDVBackgroundGeolocation"
cordova-plugin-bluetoothle 6.0.2 "Bluetooth LE"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file-opener2 3.0.5 "File Opener2"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-globalization 1.11.0 "Globalization"
cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 5.1.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)
@ionic-native/core :
{
"_from": "@ionic-native/core@^5.0.0",
"_id": "@ionic-native/core@5.28.0",
"_inBundle": false,
"_integrity": "sha512-YmR70U+bIk1e4V36bke8HCol2XwuplAr4OTok4Jdx6MaAfJ1xR1AWt2PiQOIgM8bAq8qkVlbgsYi2rEOzKVc7A==",
"_location": "/@ionic-native/core",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "@ionic-native/core@^5.0.0",
"name": "@ionic-native/core",
"escapedName": "@ionic-native%2fcore",
"scope": "@ionic-native",
"rawSpec": "^5.0.0",
"saveSpec": null,
"fetchSpec": "^5.0.0"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-5.28.0.tgz",
"_shasum": "9fdbc3657d778c4c524c7091e6f0c8e4426bcd28",
"_spec": "@ionic-native/core@^5.0.0",
"_where": "/Users/david/Development/provatis/workspace/ionic-provathermo",
"author": {
"name": "ionic"
},
"bugs": {
"url": "https://github.com/ionic-team/ionic-native/issues"
},
"bundleDependencies": false,
"dependencies": {
"@types/cordova": "latest"
},
"deprecated": false,
"description": "Ionic Native - Native plugins for ionic apps",
"homepage": "https://github.com/ionic-team/ionic-native#readme",
"license": "MIT",
"module_ivy_ngcc": "__ivy_ngcc__/index.js",
"module": "index.js",
"name": "@ionic-native/core",
"peerDependencies": {
"rxjs": "^5.5.0 || ^6.5.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ionic-team/ionic-native.git"
},
"typings": "index.d.ts",
"version": "5.28.0",
"__processed_by_ivy_ngcc__": {
"module": "10.0.14",
"typings": "10.0.14"
},
"scripts": {
"prepublishOnly": "node --eval \"console.error('ERROR: Trying to publish a package that has been compiled by NGCC. This is not allowed.\\nPlease delete and rebuild the package, without compiling with NGCC, before attempting to publish.\\nNote that NGCC may have been run by importing this package into another project that is being built with Ivy enabled.\\n')\" && exit 1"
}
}
@ionic-native/google-maps :
{
"_from": "@ionic-native/google-maps",
"_id": "@ionic-native/google-maps@5.5.0",
"_inBundle": false,
"_integrity": "sha512-+sCaB7cLR35ApsOyYSfwDX2ZTO2ItOI6FHkgTQ2rzOA1DVJ9rlU8HDL6jYBUhq+aDe3lhCPexSOryeBynaSvpQ==",
"_location": "/@ionic-native/google-maps",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "@ionic-native/google-maps",
"name": "@ionic-native/google-maps",
"escapedName": "@ionic-native%2fgoogle-maps",
"scope": "@ionic-native",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/@ionic-native/google-maps/-/google-maps-5.5.0.tgz",
"_shasum": "02537e04bb0d01d5580f936d8ccce6745188d90a",
"_spec": "@ionic-native/google-maps",
"_where": "/Users/david/Development/provatis/workspace/ionic-provathermo",
"author": {
"name": "ionic"
},
"bugs": {
"url": "https://github.com/ionic-team/ionic-native/issues"
},
"bundleDependencies": false,
"dependencies": {},
"deprecated": false,
"description": "Ionic Native - Native plugins for ionic apps",
"homepage": "https://github.com/ionic-team/ionic-native#readme",
"license": "MIT",
"module": "index.js",
"name": "@ionic-native/google-maps",
"peerDependencies": {
"@ionic-native/core": "^5.1.0",
"rxjs": "^6.3.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ionic-team/ionic-native.git"
},
"typings": "index.d.ts",
"version": "5.5.0"
}
Current behavior:
I draw 30 differents polylines with different colors & more than 100 points, polylines are assembled.
I want on click on a polyline, showing an HtmlInfoWindow
It works on a single polyline.
But with a lot of polylines & points, a little number of polylines send POLYLINE_CLICK event, but some send nothing when i click on. Some other send the POLYLINE_CLICK event but with bad gps position & bad polyline id.
here is my code
const p: Polyline = await this.map.addPolyline({
points,
color: range.color,
width: 5,
geodesic: false,
zIndex: 2,
clickable: true
});
this.polylines.push(p);
this.segmentPolyline.set(p.getId(), routePositions);
p.on(GoogleMapsEvent.POLYLINE_CLICK).subscribe(data => {
const position = data[0];
const polyline = data[1] as Polyline;
const uid = polyline.getId();
const originalStrokeColor = polyline.getStrokeColor();
polyline.setStrokeColor('yellow');
console.log(polyline, uid, position, originalStrokeColor)
const segRoutePositions = this.segmentPolyline.get(uid);
console.log(segRoutePositions.length)
const distance = segRoutePositions[segRoutePositions.length - 1].odometer - segRoutePositions[0].odometer;
const distanceTxt = distance < 1000 ? Math.round(distance) + 'm' : UtilsService.round(distance / 1000, 2) + ' km';
const duration = segRoutePositions[segRoutePositions.length - 1].position.timestamp
- segRoutePositions[0].position.timestamp;
const avgMeasure = UtilsService.averageMeasure(segRoutePositions.map(pos => pos.measures));
const popup = new HtmlInfoWindow();
popup.setContent('\
<table class="info-window">\
<tr><td style="color:' + range.color + '" colspan="2"><b>' + this.translate.instant('range-' + range.name) + '</b></td></tr>\
<tr><td class="title">' + this.translate.instant('distance') + '</td> <td>' + distanceTxt + '</td></tr>\
<tr><td class="title">' + this.translate.instant('duration') + '</td> <td>' + UtilsService.getDurationAsText(duration) + '</td></tr>\
<tr><td class="title">' + this.translate.instant('tground') + '</td> <td>' + avgMeasure.tGround.toPrecision(2) + '</td></tr>\
<tr><td class="title">' + this.translate.instant('tair') + '</td><td>' + avgMeasure.tAir.toPrecision(2) + '</td></tr>\
<tr><td class="title">' + this.translate.instant('humidity') + '</td><td>' + avgMeasure.airHumidity.toPrecision(2) + '</td></tr>\
<tr><td class="title">' + this.translate.instant('dewpoint') + '</td><td>' + avgMeasure.dewPoint.toPrecision(2) + '</td></tr>\
</table> ');
const marker = this.map.addMarkerSync({ position });
const obs = this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe(() => {
polyline.setStrokeColor(originalStrokeColor);
marker.remove();
obs.unsubscribe();
});
popup.open(marker);
marker.showInfoWindow();
});
Expected behavior:
When you click on a polyline, you need to have the Polyline_click event & position clicked with the polyline id fired.
Screen capture or video record:
Related code, data or error log (please format your code or data):
https://github.com/boblepepeur/ionic-cordova-google-map-bug-demo
Support this plugin activity
I appreicate if you give me a beer 🍺 from here