Popup

This section introduces the map popup .

Blasting Popup

1. Creation of popups

This section describes how to add a pop-up window to the map surface. The same map instance can only open one pop-up window at a time.

JavaScript

                            var lnglats = [
                                [116.368904, 39.923423],
                                [116.382122, 39.921176],
                                [116.387271, 39.922501],
                                [116.398258, 39.914600]
                            ];
                            map.on('load',function () {
                                for (var i = 0, marker; i < lnglats.length; i++) {
                                    Var popup = new nimap.Popup().setText('I am the first ' + (i + 1) + 'Marker');
                                    var marker = new nimap.Marker().setLngLat(lnglats[i]).setPopup(popup).addTo(map);
                                }
                            })

2. Customize the creation of popups

The instance method setDOMContent can set the pop-up window of the custom html. When instantiating, you can pass the className to customize the style of the pop-up window

JavaScript

                            var infoWindow;

                            // Open the pop-up window at the specified location
                            function openInfo() {
                                // Build the content displayed in the popup
                                var info = [];
                                Var title = 'Holiday hotel Price: 318';
                                Info.push("<div>NavInfo Software");
                                Info.push("Tel: 010-8412000 Zip Code: 100102");
                                Info.push("address></div>");
                                infoWindow = new nimap.Popup({closeOnClick: false,className:'custom'})
                                            .setLngLat(map.getCenter())
                                            .setDOMContent(createInfoWindow(title, info.join("<br/>")));
                                infoWindow.on('open', showInfoOpen);
                                infoWindow.on('close', showInfoClose);
                                infoWindow.addTo(map);
                            }

                            // Build a custom pop-up
                            function createInfoWindow(title, content) {
                                var info = document.createElement("div");
                                info.className = "custom-info input-card content-window-card";

                                // You can modify the width and height of the custom form in the following way
                                //info.style.width = "400px";
                                // Define the top title
                                var top = document.createElement("div");
                                var titleD = document.createElement("div");
                                top.className = "info-top";
                                titleD.innerHTML = title;

                                top.appendChild(titleD);
                                info.appendChild(top);

                                // Define the middle content
                                var middle = document.createElement("div");
                                middle.className = "info-middle";
                                middle.style.backgroundColor = 'white';
                                middle.innerHTML = content;
                                info.appendChild(middle);

                                // Define the bottom content
                                var bottom = document.createElement("div");
                                bottom.className = "info-bottom";
                                bottom.style.position = 'relative';
                                bottom.style.top = '0px';
                                bottom.style.margin = '0 auto';
                                info.appendChild(bottom);
                                return info;
                            }