Javascript 在传单中创建多边形后，是否有办法打开弹出式输入文本？

我正在尝试制作一个使用传单显示地图的web应用程序，用户应该能够在地图上绘制和编辑多边形，并且应该能够命名他们创建的每个多边形

我想在创建多边形时打开一个弹出窗口，该多边形要求输入名称，然后将其设置为geojson功能中的属性

我试图按照这个例子，但我不能让它与传单画创建活动

这是我得到的

//地图中心
var中心=[-32.692825，-62.104689]；
//地图创建
var map=L.map（‘map’）.setView（中间，14）；
//贴图平铺层
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
maxZoom:19，
属性：“©；贡献者”
}).addTo（地图）；
//初始化FeatureGroup以存储可编辑图层
var editableLayers=新的L.FeatureGroup（）；
map.addLayer（可编辑层）；
//绘制插件选项
var drawPluginOptions={
位置：'左上'，
抽签：{
多边形：{
AllowerSection:false，//将形状限制为简单多边形
抽屉错误：{
颜色：'#e1e100'，//形状相交时将改变颜色
消息：“噢，快！你不能画那个！”//当相交时将显示的消息
},
形状选项：{
颜色：“#97009c”
}
},
//通过将工具栏项设置为false来禁用它
多段线：false，
圆：false，//关闭此绘图工具
矩形：假，
马克：错，
},
编辑：{
featureGroup:editableLayers，
多边形：{
错误部分：false
}//必需！！
}
};
//初始化绘图控件并将可编辑图层的FeatureGroup传递给它
var drawControl=新的L.Control.Draw（drawPluginOptions）；
map.addControl（drawControl）；
var editableLayers=新的L.FeatureGroup（）；
map.addLayer（可编辑层）；
//绘制创建的事件处理程序
函数polygonCreateHandler（e）{
变量类型=e.layerType；
var层=e层；
如果（类型！=“多边形”）{
警报（“ESTO NO ES UN POLIGONO”）；
返回；
}
editableLayers.addLayer（层）；
}
//绘制创建的事件
地图上（'draw:created'，函数（e）{
polygonCreateHandler（e）；
});
//忽略这一点
/*jshint multistr:true*/
var模板\
新速度：\
\
保存更改\
';
/*
**获取geojson示例
让geojson_url=”https://raw.githubusercontent.com/delineas/leaflet-flyto-webpack-bulma/master/src/data/arboles_singulares_en_espacios_naturales.geojson"
取回(
geojson_url
).那么(
res=>res.json（）
).那么(
数据=>{
让geojsonlayer=L.geoJson（数据{
onEachFeature：功能（功能，图层）{
layer.bindPopup（feature.properties['arbol_nombre']）
图层设置图标（树标记器）
}
}).addTo（地图）
map.fitBounds（geojsonlayer.getBounds（））
}
)
**图层多边形示例
var geojson_msjz_多边形={
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“属性”：{“名称”：“测试发行版”}，
“几何学”：{
“类型”：“多边形”，
“坐标”：[
[
[
-62.103266716003425,
-32.687209099455636
],
[
-62.13047504425048,
-32.68211618935444
],
[
-62.133564949035645,
-32.693746380985395
],
[
-62.106142044067376,
-32.698838627713116
],
[
-62.103266716003425,
-32.687209099455636
]
]
]
}
}
]
};
让geojsonlayer=L.geoJson（geoJson_msjz_polygon{
onEachFeature：功能（功能，图层）{
让text=L.工具提示({
永久性：是的，
方向：'中心'，
类名：“文本”
})
.setContent（feature.properties.name）
.setLatLng（layer.getBounds（）.getCenter（））；
text.addTo（地图）；
}
}).addTo（地图）；
map.fitBounds（geojsonlayer.getBounds（））
*/

#地图{
高度：98vh；
宽度：100hw；
}
身体{
保证金：0；
}
html，
身体，
#传单{
身高：100%；
}
.弹出表{
宽度：100%；
}
.弹出表格行{
背景颜色：灰色；
}

---

只需在创建的图层上绑定一个弹出窗口，并在创建后将其打开即可

function polygonCreateHandler(e) {

  var type = e.layerType;
  var layer = e.layer;

  if (type != 'polygon') {
    alert("ESTO NO ES UN POLIGONO");
    return;
  }

  editableLayers.addLayer(layer);
  
  layer.bindPopup(template).openPopup(); // here create and open the popup with your form
}

//地图中心
var中心=[-32.692825，-62.104689]；
//地图创建
var map=L.map（‘map’）.setView（中间，14）；
//贴图平铺层
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
maxZoom:19，
属性：“©；贡献者”
}).addTo（地图）；
//初始化FeatureGroup以存储可编辑图层
var editableLayers=新的L.FeatureGroup（）；
map.addLayer（可编辑层）；
//绘制插件选项
var drawPluginOptions={
位置：'左上'，
抽签：{
多边形：{
AllowerSection:false，//将形状限制为简单多边形
抽屉错误：{
颜色：'#e1e100'，//形状相交时将改变颜色
消息：“噢，快！你不能画那个！”//当相交时将显示的消息
},
形状选项：{
颜色：“#97009c”
}
},
//通过将工具栏项设置为false来禁用它
多段线：false，
圆：false，//关闭此绘图工具
矩形：假，
马克：错，
},
编辑：{
featureGroup:editableLayers，
多边形：{
错误部分：false
}//必需！！
}
};
//初始化绘图控件并将可编辑图层的FeatureGroup传递给它
var drawControl=新的L.Control.Draw（drawPluginOptions）；
map.addControl（drawControl）；
var editableLayers=新的L.FeatureGroup（）；
map.addLayer（可编辑层）；
var模板\
新速度：\
\
保存更改\
';
var createdPolygonTemplate='1\
姓名：\
\
';
//绘制创建的事件处理程序
函数polygonCreateHandler（e）{
变量类型=e.layerType；
var层=e层；
如果（类型！=“多边形”）{
警报（“ESTO NO ES UN POLIGONO”）；
<div id="map" style="width: 100%; height: 500px;"></div>

<script>
    var map = L.map('map', {
        center: [18.9, -71.2],
        zoom: 8,
    });
    const tileURL = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
    L.tileLayer(tileURL).addTo(map);

    drawnItems = L.featureGroup().addTo(map);
    var drawControl = new L.Control.Draw({
        edit: {
            featureGroup: drawnItems,
        },
    });

    var getName = function(layer) {
        var name = prompt('please, enter the geometry name', 'geometry name');
        return name;
    };

    map.addControl(drawControl);
    map.on(L.Draw.Event.CREATED, function(e) {
        var layer = e.layer; 
        var name = getName(layer);
        if (name == 'geometry name') {
            layer.bindPopup('-- no name provided --');
        } else if (name == '') {
            layer.bindPopup('-- no name provided --');
        } else {
            layer.bindTooltip(name, {permanent:true, direction:'top'})
        };
        drawnItems.addLayer(layer);
    });

</script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.css" integrity="sha512-vJfMKRRm4c4UupyPwGUZI8U651mSzbmmPgR3sdE3LcwBPsdGeARvUM5EcSTg34DK8YIRiIo+oJwNfZPMKEQyug==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" crossorigin="anonymous"></script>