Javascript 如何在不刷新页面的情况下重新加载mapquest地图?
Im使用mapquest提供的流量层,以下是Im使用的功能:Javascript 如何在不刷新页面的情况下重新加载mapquest地图?,javascript,mapquest,Javascript,Mapquest,Im使用mapquest提供的流量层,以下是Im使用的功能: function displayTrafficMap(lati,long,trafficdiv) { var options={ elt:document.getElementById(trafficdiv), zoom:10, latLng:{lat: lati,lng: long}, mtype:'map',
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>
window.onload=function(){displayTrafficMap(纬度、经度、'trafficmap');}
这很好,但是如何使用新的纬度和经度再次调用此函数,而不必刷新页面?我试过这个:
<a href="#" onclick="displayTrafficMap(newlat,newlon,'trafficmap');return false;">
但什么也没发生。有什么建议吗?看来我的答案不够,希望这能提供更多关于问题解决方案的信息。为了确认这个问题,我正在使用mapquest显示一张带有交通状况的地图。如何在不刷新页面的情况下更新地图lat/lon?下面是我使用的整个脚本,包括使用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的lat/lon,该ID通过下拉选择传递。请使用问题的编辑链接添加其他信息。“发布答案”按钮只能用于完整回答问题。@jzworkman-我不同意。当然,完全描述这个解决方案还有改进的余地。但如果这是问题的解决方案,它应该是一个答案,而不是编辑成问题。据我所知,虽然显然不理想。我想我只是想作为一个自我回答(与问题相同的海报),你可以结束这个问题(因为它非常具体,不太可能帮助另一个案例),或者对答案提供更多细节,这可能在将来有用。事实上,它并没有给未来的用户提供太多的参考。希望这能对未来的人们有所帮助。我想说的是,没有人试图帮助我解决这个问题,所以我真的没有想到原始答案会有问题。我原以为添加它会对将来的人有所帮助,但再次希望更新后的答案能更详细地描述我为解决问题所做的工作。