Как добавить элементы управления вводом при нажатии на всплывающее окно маркера карты Google

Question

этот код предназначен для отображения информационного текста по щелчку маркера Google.

var infowindow = new google.maps.InfoWindow({
                content: "Add your popup content here"
              });

Мне нужно показать элементы управления вводом, такие как текстовое поле, раскрывающийся список (раскрывающийся список netsted) вместо всплывающего информационного текста.

Может ли кто-нибудь предоставить пример кода для этого, либо в угловых js и т. Д.

Помощь очень важна !!

Answer 1

То, что вы ищете, называется пользовательским маркером html.

По сути, вы создаете маркер и затем программно внедряете туда элемент управления html следующим образом:

function CustomMarker(latlng, map, args) {
    this.latlng = latlng;   
    this.args = args;   
    this.setMap(map);   
}

Затем установитепрототип маркера:

CustomMarker.prototype = new google.maps.OverlayView();

Затем реализуйте функцию рисования, где вы можете создать любой HTML-элемент управления, такой как div, текстовое поле, раскрывающийся список и т. д.:

CustomMarker.prototype.draw = function() {

    var self = this;

    var div = this.div;

    if (!div) {

        div = this.div = document.createElement('div');

        div.className = 'marker';

        div.style.position = 'absolute';
        div.style.cursor = 'pointer';
        div.style.width = '20px';
        div.style.height = '20px';
        div.style.background = 'blue';

        if (typeof(self.args.marker_id) !== 'undefined') {
            div.dataset.marker_id = self.args.marker_id;
        }

        google.maps.event.addDomListener(div, "click", function(event) {            
            google.maps.event.trigger(self, "click");
        });

        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }

    var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

    if (point) {
        div.style.left = point.x + 'px';
        div.style.top = point.y + 'px';
    }
};

Реализуйте другие функции, такие как remove, getPosition и т. д.Подробности можно найти здесь: https://humaan.com/blog/custom-html-markers-google-maps/