如何在单击 google 地图标记弹出窗口时添加输入控件

Question

此代码用于在点击 google 标记时显示信息文本。

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

我需要在此弹出窗口中显示输入控件，例如文本框、下拉菜单 (netsted dropwdown)，而不是纯信息文本。

有人可以在 angular js 等中为此提供示例代码吗

非常感谢您的帮助！！

Answer 1

您要找的是自定义 html 标记。

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

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

然后设置marker的原型：

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 地图标记弹出窗口时添加输入控件

How to add input controls on click of google map marker popup

asp.net-mvc

google-maps

google-maps-api-3

angularjs