Question

此代码用于在Google标记的点击弹出窗口中显示信息文本。

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

我需要在此弹出窗口中显示输入控件，例如文本框，dropdown（netsted dropwdown），而不是纯文本信息。

有人可以用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/

如何在点击Google Map Marker弹出窗口时添加输入控件

1 个答案: