2014-03-13 133 views
0

即时通讯使用的通信层可用与Mapquest服务,这里的功能是即时通讯使用:如何在不刷新页面的情况下重新加载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;"> 

但没有任何反应。有什么建议么?

回答

0

看来我的答案是缺乏的,希望这将提供更多关于该问题解决方案的信息。为了确认这个问题,我使用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的纬度/经度。

+0

请使用您问题上的编辑链接添加其他信息。后回答按钮应该只用于问题的完整答案。 – jzworkman

+0

@jzworkman - 我不同意。当然,完全描述这个解决方案还有改进的空间。但如果这是解决问题的办法,它应该是一个答案,而不是编入问题的答案。据我所知,[部分答案可以接受](http://meta.stackexchange.com/questions/144452/is-it-okay-to-put-partial-answers),虽然显然不理想。 – femtoRgon

+0

我想我只是想自己的答案(与问题相同的海报),你可以关闭该问题(因为它是非常具体的,不太可能帮助另一个案例),或给出更多的细节,可能有用的答案未来。事实上,它并没有为未来的用户提供很多用途。 – jzworkman

相关问题