2010-04-09 188 views
0

我遇到了谷歌地图API V3的问题。似乎每次我加载我的页面时,地图加载(包括标记),然后它会快速重新加载并删除所有标记。我错过了什么吗?我究竟做错了什么?谷歌地图api v3刷新标记

下面是一个例子: http://www.PaulPeelen.com/wp-content/uploads/2010/04/SafariScreenSnapz001.mov

这是我的代码:

<script type="text/javascript"> 
<!-- 
var hash = "{{$sHashLocal}}"; 
var webroot = "{{$webroot}}"; 
var map; 

function initialize() { 
    var latlng = new google.maps.LatLng(59.32045, 18.066902); 
    var myOptions = { 
     zoom: 13, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    return map; 
} 

function getMarkerInfo (infowindow, rack_id) 
{ 
    // Get all the racks 
    $.ajax({ 
     type: "GET", 
     url: webroot+"ajax/getRack/"+hash+"/"+rack_id, 
     cache: false, 
     dataType: "html", 
     success: function(html) { 
      $("#rack_"+rack_id).html(); 

      infowindow.setContent(html); 
     } 
    }); 
} 

$(document).ready(function() { 
map = initialize(); 



function attachSecretMessage(marker, rack_id) { 
    var infowindow = new google.maps.InfoWindow({ 
     size: new google.maps.Size(50,50) 
    }); 

    google.maps.event.addListener(marker, 'click', function(){ 
     var ret = '<div id="rack_'+rack_id+'" class="rackDiv"><div class="rackDivLoading"><img src="theme/images/loader-small.gif" border="0"/><span>Hämtar data</span></div></div>'; 
     infowindow.setContent(ret); 
     infowindow.open(map,marker); 

     getMarkerInfo(infowindow,rack_id); 
    }); 
} 

function addPlacemark (lat,lng,title, rack_id) { 
    var image = new google.maps.MarkerImage('http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png', 
       new google.maps.Size(32, 32), 
       new google.maps.Point(0,0), 
       new google.maps.Point(0, 32)); 
    var shadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/shadow50.png', 
       new google.maps.Size(37, 34), 
       new google.maps.Point(0,0), 
       new google.maps.Point(-4, 34)); 

    var location = new google.maps.LatLng(lat,lng); 
    var marker  = new google.maps.Marker({ 
         position: location, 
         map: map, 
         icon: image, 
         shadow: shadow}); 


    marker.setTitle(title); 

    attachSecretMessage(marker, rack_id); 
} 

// Get all the racks 
$.ajax({ 
    type: "GET", 
    url: webroot+"ajax/getRacks/"+hash, 
    cache: false, 
    dataType: "xml", 
    success: function(xml) { 
     // Add the results 
     $(xml).find("station").each(function() { 
      rack_id = $(this).find("rack_id").text(); 
      title = $(this).find("description").text(); 
      longitute = parseFloat($(this).find("longitute").text()); 
      latitude = parseFloat($(this).find("latitude").text()); 

      addPlacemark(latitude, longitute, title, rack_id); 
     }); 
    } 
}); 

$("#addMark").click(function() { 

    addPlacemark (59.32045, 18.066902); 
}); 

// Set size 
setPageSize(); 
}); 
//--> 
</script> 
+0

setPageSize()函数中会发生什么? – 2010-04-09 21:44:15

+0

//设置中间尺寸 功能setPageSize() { \t //设置设计 \t变种arrPageSizes = ___ getpagesize的(); \t \t var pageHeight = arrPageSizes [1]; \t var footerHeight = $('#footer')。height(); \t \t var mapHeight = pageHeight - footerHeight; \t \t $('#map_canvas')。height(mapHeight); (')调整大小',函数(){ \t setPageSize(); }); 只有那个......但是这个问题在我添加之前就已经发生了。 我很高兴知道,在Firefox中它有时可以工作,有时它不会。 – 2010-04-09 21:46:40

+0

另外,如果您使用XHTML,而不是将您的脚本包装在html注释中,请尝试将它们包装在cdata标签中。我怀疑这是问题,但它是*首选的方式。请参阅:http://javascript.about.com/library/blxhtml.htm – 2010-04-09 21:49:46

回答

1

您的最后一个职位让我思考,所以我忽略了我的代码,看到一个老调试代码重新运行initialize()函数。 感谢您的帮助!