回发和Document.ready

时间:2013-09-23 13:32:32

标签: javascript asp.net postback mapbox

我正在使用Mapbox Javascript API(http://www.mapbox.com/mapbox.js/api/v1.3.1/),并且遇到了有关如何在回发时加载地图的问题。当第一次加载页面时,我希望地图以我定义的一组坐标为中心,但是当用户在文本框中输入邮政编码时,我希望地图以这些坐标为中心。在我修改代码之前我的原始问题是地图会加载文档准备就绪并且地图不会设置用户在回发时定义的新视图,但现在我遇到了地图不能解决的问题加载文档就绪,但当用户输入邮政编码时,它可以正常工作。

这是我的document.ready功能:

$( document ).ready(function() {
        var map = L.mapbox.map('map');
        var oldZoom = map.zoomControl;
        oldZoom.removeFrom(map);
        new L.Control.Zoom({ position: 'topright' }).addTo(map);
        map.addLayer(L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png'));
        map.setView([53.503355, -2.827564], 6); // this runs on document ready, but also sets the view on postback
        function _doPostBack() {
            updateMap();
        } // this is my attempt at a fix
        var markerLayer = L.mapbox.markerLayer()
        .addTo(map);
    });

这是我的updateMap()函数,当用户导致回发时,我想触发

function updateMap()
    {
        map.setView([<asp:Literal runat='server' id='currentLatSetView'/>,<asp:Literal runat='server' id='currentLongSetView'/>], <asp:Literal runat='server' id='theZoomScale'/>);
    }

以下是相关按钮代码:

<asp:button runat="server" ID="submitPostcode" class="btn btn-default" OnClientClick="updateMap()" OnClick="submitPostcode_Click" Text="Go!"/>

所以我的问题是,如何在我的javascript中添加一个检查,以便在第一次加载页面时将地图置于一组坐标上,以及2.如何在document.ready中阻止setView() ()来自触发,而是使用不同的用户定义坐标激发不同的setView()。

1 个答案:

答案 0 :(得分:1)

您可以定义隐藏字段以获得坐标值。

<asp:HiddenField runat="sever" ID="hdnXAxis"  Vlaue="Your Default Value" />
<asp:HiddenField runat="sever" ID="hdnYAxis"  Vlaue="Your Default Value" />

On Postback:

hdnXAxis.Value= txtXAxis.Text;
hdnYAxis.Value= txtYAxis.Text;

JS:

$( document ).ready(function() {
var xAxis = $('#<%= hdnXAxis.Client%>').val();
var yAxis = $('#<%= hdnYAxis.Client%>').val();
        var map = L.mapbox.map('map');
        var oldZoom = map.zoomControl;
        oldZoom.removeFrom(map);
        new L.Control.Zoom({ position: 'topright' }).addTo(map);
        map.addLayer(L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png'));
        map.setView([xAxis, yAxis], 6); // this runs on document ready, but also sets 
        var markerLayer = L.mapbox.markerLayer()
        .addTo(map);
    });

这未经过测试,但这样的事情可以解决您的问题。