1

此代码是在点击谷歌标记时显示信息文本。

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

我需要在此弹出窗口上显示文本框、下拉菜单（netsted dropwdown）等输入控件，而不是纯信息文本。

有人可以为此提供示例代码，无论是角度js等。

高度赞赏帮助！

4

1 回答 1

1

您正在寻找的称为自定义 html 标记。

基本上你所做的是创建一个标记，然后以编程方式将 html 控件注入其中，如下所示：

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

然后设置标记的原型：

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

然后实现 draw 函数，您可以在其中创建任何 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/

于 2019-05-30T15:47:37.710 回答