无法获取mapbox onsubmit以显示标记

时间:2016-01-08 19:01:09

标签: javascript closures mapbox mapbox-gl-js

嘿伙计们我想要一个按钮提交一个点来显示在地图集地图上。我在单击处理程序的正确范围内遇到问题。

现在我像这样定义我的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。我尝试使用容器作为封闭范围,但这也没有用。有人知道怎么做吗?

1 个答案:

答案 0 :(得分:0)

首先,HTML中存在语法错误。您忘记了def doSomeOperation(): Future[WSResponse] = { service.doSomeWorkOnDB() Future.successful(ok()) } 属性的结束语:

type

应该是:

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

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

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

现在您可以通过致电window.onload = function () { // Assign return object window.obj = (function () { return { mboxsubmit: function (event) { alert('Fire!'); } }; })(); }

来使用它
obj.mboxsubmit