如何重新加载mapquest地图而不刷新页面?

How can I reload a mapquest map without refreshing page?

本文关键字：刷新 何重新 加载 mapquest 地图      更新时间：2023-09-26

我使用的是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脚本，该脚本连接到我的数据库，以获取我分配给通过下拉选择传递的区域的纬度/经度

相关文章：