ionic-team / ionic-team/ionic-native-google-maps
Can't display multiple HtmlInfoWindow
- Ngôn ngữ chính
- TypeScript
- Star
- 215
- Fork
- 119
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Mô tả
**I'm submitting a ...** (check one with "x")
- [x] question
- [ ] any problem or bug report
- [ ] feature request
**If you choose 'problem or bug report', please select OS:** (check one with "x")
- [x] **Android**
- [x] **iOS**
- [ ] **Browser**
**cordova information:** (run `$> cordova plugin list`)
```
com.googlemaps.ios 3.9.0 "Google Maps SDK for iOS"
cordova-androidx-build 1.0.4 "cordova-androidx-build"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-fcm-with-dependecy-updated 7.3.1 "Cordova FCM Push Plugin"
cordova-plugin-googlemaps 2.8.0-20200709-2008 "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-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
```
**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": "^5.22.0-beta-1",
"@ionic-native/google-maps": "^5.27.0-beta-20200630",
**Current behavior:**
i'm working on a project and want to add multiple markers to the map ( success on this step) with an htmlinfowindow for each marker , and display all the htmlinfowindows at the same time but i got only the last one displayed
**Expected behavior:**
all the infowindow should be displayed
**Screen capture or video record:**
**what i need**

**what i get**

**Related code, data or error log (please format your code or data):**
**my data**
```
"data": [
{
"lat": "51.3349833",
"lon": "6.0991350",
"description": "0.20 mm"
},
{
"lat": "51.2998667",
"lon": "6.0022533",
"description": "0.00 mm"
},
{
"lat": "51.2201067",
"lon": "5.8785150",
"description": "n/a"
},
{
"lat": "51.1999567",
"lon": "5.7385417",
"description": "0.00 mm"
},
{
"lat": "51.4342617",
"lon": "6.4083933",
"description": "0.20 mm"
},
{
"lat": "44.8447250",
"lon": "19.7638483",
"description": "0.00 mm"
},
{
"lat": "44.8498617",
"lon": "19.7591050",
"description": "0.20 mm"
},
{
"lat": "51.4218050",
"lon": "6.4281983",
"description": "0.00 mm"
},
{
"lat": "51.2840567",
"lon": "5.8748500",
"description": "0.00 mm"
},
{
"lat": "51.4514617",
"lon": "6.2511133",
"description": "0.00 mm"
},
{
"lat": "51.3725017",
"lon": "6.3420100",
"description": "0.00 mm"
},
{
"lat": "51.4214067",
"lon": "6.5314200",
"description": "0.00 mm"
},
{
"lat": "51.3234367",
"lon": "6.3219683",
"description": "n/a"
},
{
"lat": "51.3489817",
"lon": "6.0161033",
"description": "0.00 mm"
},
{
"lat": "51.3097983",
"lon": "6.0484950",
"description": "0.00 mm"
}
]
```
**function to init the MAP**
```
async loadMap(lat, lng) {
let mapOptions: GoogleMapOptions = {
mapType: GoogleMapsMapTypeId.SATELLITE,
controls: {
'compass': true,
'myLocationButton': false,
'myLocation': false, // (blue dot)
'indoorPicker': false,
'zoom': true, // android only
'mapToolbar': true // android only
},
gestures: {
scroll: true,
tilt: true,
zoom: true,
rotate: false
},
camera: {
target: {
lat: lat,
lng: lng
},
zoom: 12,
tilt: 30
}
};
this.map4 = GoogleMaps.create('map4', mapOptions);
}
```
**function to add markers**
```
async add_markers_tomap(data) {
this.map4.clear();
data.forEach(async (element) => {
let htmlInfoWindow = new HtmlInfoWindow();
let frame: HTMLElement = document.createElement('div');
let text = '
' + element.description + '
';frame.innerHTML = [
text
].join("");
htmlInfoWindow.setContent(frame, {
width: "100px",
height: "150px"
});
const marker = await this.map4.addMarker({
position: { lat: element.lat, lng: element.lon },
title: element.description,
icon: {
url: "./assets/imgs/marker.png",
size: {
width: 30,
height: 43
}
},
animation: 'DROP'
})
// Without clicking icon additionally
htmlInfoWindow.open(marker);
});
}
```
Hướng dẫn đóng góp
Hướng nghiên cứu
Start with the add_markers_tomap function and its HtmlInfoWindow.open calls, using the supplied marker data to reproduce the behavior on Android and iOS. Compare the displayed result with the expected screen capture and determine what behavior the plugin supports; done means the documented multiple-window expectation is either met or clearly accounted for.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- html, typescript
- Lĩnh vực
- mobile-dev
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100