0

嘿伙计们，我正在尝试让一个按钮提交一个点以显示在 mapbox 地图上。我无法在正确的范围内获取点击处理程序。

现在我像这样定义我的 js 来显示地图并定义处理程序：

window.onload = function(){

(function(){

L.mapbox.accessToken = 'pk.eyJ1IjoidHJlYmVrMSIsImEiOiJjaWo0c2ZtYzYwMDN3dGhtMzhremFtMW8wIn0.dBWgVtzgwok3cCi7p5euCg';
var container = document.getElementById('container');

var map = L.mapbox.map('map', 'mapbox.streets').setView([37.7749300,-122.4194200], 12); 

map.featureLayer.setGeoJSON(geojson);

// var newMarkerGroup = new L.LayerGroup();
    map.on('click', function(e){
       var newMarker = new L.marker(e.latlng).addTo(map);     
    });

return{

    mboxsubmit: function(event){

        event.preventDefault();
        var query = document.getElementById('mboxplace').value; 

        var map = document.getElementById('map'); 
        var newMarker = new L.marker({lat: 37.7749300, lng: -122.4194200 }).addTo(map);

        document.getElementById('mboxplace').value = '';  
    }


};

})();


}

在 HTML 中，我有一个表单：

<div id='container'>

        <div id='map'></div>
        <br/>
        <form onsubmit="mboxsubmit(event)" name="mboxform" id="mboxform">
            Search: <input id="mboxplace" name="mboxtext" type="text placeholder ="input a place to locate">
            <input id="mboxsub" type="submit"></input>
        </form>

        <a href="/"><button>Go Back to Home Page</button></a>
        <br/>
    </div>

无论我做什么，我都无法定义 mboxsubmit。我尝试将容器用作封闭范围，但这也不起作用。有人知道怎么做吗？

4

1 回答 1

0

首先，您的 HTML 中存在语法错误。您忘记了type属性的结束引号：

<input id="mboxplace" name="mboxtext" type="text placeholder ="input a place to locate">

应该：

<input id="mboxplace" name="mboxtext" type="text" placeholder ="input a place to locate">

您的实际问题是您的函数返回一个未分配的对象。如果要在 onsubmit 事件中访问它，则需要将其分配给全局范围内的变量：

window.onload = function () {
    // Assign return object
    window.obj = (function () {
        return  {
            mboxsubmit: function (event) {
                alert('Fire!');
            }
        };
    })();
}

现在您可以通过调用来使用它obj.mboxsubmit：

<form onsubmit="obj.mboxsubmit()"></form>
于 2016-01-08T20:40:06.483 回答