簡體   English   中英

如何在不刷新頁面的情況下重新加載mapquest地圖?

[英]How can I reload a mapquest map without refreshing page?

我正在使用mapquest可用的流量層,以下是我正在使用的功能:

    function displayTrafficMap(lati,long,trafficdiv) {

    var options={

            elt:document.getElementById(trafficdiv), 
            zoom:10,
            latLng:{lat: lati,lng: long}, 
            mtype:'map',
            bestFitMargin:0,
            zoomOnDoubleClick:true

    };

    window.map = new MQA.TileMap(options);

    MQA.withModule('zoomcontrol3','viewcontrol3','traffictogglecontrol', 'shapes', function()  {

        var ttc = new MQA.TrafficToggleControl();
        var vwc = new MQA.ViewControl3();
        var zc = new MQA.LargeZoomControl3();

        window.map.addControl( zc , new MQA.MapCornerPlacement( MQA.MapCorner.TOP_RIGHT,  new MQA.Size(5,40)));
        window.map.addControl( vwc , new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT));
        window.map.addControl( ttc , new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT));

        ttc.toggle();

    });

}

當頁面加載時,我像這樣加載此功能:

<script>window.onload = function() { displayTrafficMap(latitude,longitude,'trafficmap'); }</script>

這可以正常工作,但是如何在不刷新頁面的情況下以新的緯度和經度再次調用此函數? 我嘗試了這個:

<a href="#" onclick="displayTrafficMap(newlat,newlon,'trafficmap');return false;">

但是什么也沒發生。 有什么建議么?

看來我的答案缺乏,希望這將提供有關該問題的解決方案的更多信息。 為了確認這個問題,我正在使用mapquest來顯示一個帶有交通狀況的地圖。 如何在不刷新頁面的情況下更新經緯度地圖? 以下是我使用的整個腳本,包括使用jquery,希望它能提供更多有人可能正在尋找的答案:

var traffic_map;

function displayTrafficMap(lati,long) {

    var options={

            elt:document.getElementById('trafficmap'), 
            zoom:10,
            latLng:{lat: lati,lng: long}, 
            mtype:'map',
            bestFitMargin:0,
            zoomOnDoubleClick:true

    };

    traffic_map = new MQA.TileMap(options);

    MQA.withModule('zoomcontrol3','viewcontrol3','traffictogglecontrol', 'shapes', function()  {

        var ttc = new MQA.TrafficToggleControl();
        var vwc = new MQA.ViewControl3();
        var zc = new MQA.LargeZoomControl3();

        traffic_map.addControl( zc , new MQA.MapCornerPlacement( MQA.MapCorner.TOP_RIGHT,  new MQA.Size(5,40)));
        traffic_map.addControl( vwc , new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT));
        traffic_map.addControl( ttc , new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT));

        ttc.toggle();

    });

}

function changeTrafficMap(lati,long)
{

    traffic_map.setCenter({lat: lati,lng: long});

}

//We run the display map function right away to load the map
displayTrafficMap(trafficlat,trafficlon);

$(document).ready(function() {

    $('#traffic_areas').bind('change', function(ev) {

        //We get the id for the area that was selected
        var areaid = $(this).val();

        $.ajax({

            url:"/traffic.php?aid=" + areaid,
            type:"GET",
            dataType:"json",
            success: function(data) {

                //First we change the current map view location
                changeTrafficMap(data.lat,data.lon);

            }

        });

    });

});

ajax調用正在調用一個名為traffic.php的php腳本,該腳本連接到我的數據庫以獲取我分配給通過下拉選擇傳遞的areaid的經/緯度。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM