2012-07-05 120 views
0

所以我读了一堆关于闭包问题,我假设这是什么,但我不知道如何解决它。谷歌地图添加标记与AJAX

问题:基本上,我只得到1标记,我假设是因为我使用相同的“标记”变量?但我不确定,也没有看到解决问题的简单解决方案。我确信有一些显而易见的事情,我会喜欢一个真正了解Javascript的人的手,而不是那些直到我得到我需要的结果的人。

谢谢!

<script> 
var geocoder; 
var map; 
var markersArray = []; 
var plocation = []; 

function initialize() { 
geocoder = new google.maps.Geocoder(); 
var latlng = new google.maps.LatLng(39.50, -98.35); 
var myOptions = { 
    zoom: 4, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

function codeAddress() { 
    //Delete Existing Markers 
    clearOverlays(); 
    deleteOverlays(); 
    //Geocode and Add the New One + Results. 
    var address = document.getElementById("address").value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     //add the center marker 
     var patientslocation =results[0].geometry.location; 
     addMarker(patientslocation, "Patient"); 
     //Zoom in on the Region. 
     map.setZoom(10); 
     //Call to Our API 
     $.getJSON("map/search", { provider_type: "01", loc: '"'+patientslocation+'"' },function(data) { 
      //Parse Results 
      var htmlstring = ""; 
      var arraylength = data.length-1; 
      console.log("Result Count (base 0): "+arraylength) 
      $(data).each(function(i,val){ 

       //Build HTML String for Side Bar 
       if (val.name){ 
        htmlstring = htmlstring + "<h3>"+val.name+"</h3>"; 
       } 
       if (val.address){ 
        htmlstring = htmlstring + val.address +"<br/>"; 
       } 
       if (val.phone){ 
        htmlstring = htmlstring +val.phone +"<br/>"; 
       } 
       //Build HTML Strings for Each Marker Hover 

       //Load the Array of Markers 
       plocation[i] = new google.maps.LatLng(val.lat, val.lng); 
       console.log(i +" : " +plocation[i]); 

       if(i === arraylength){ 
        console.log("Load plocations called") 
        load_plocations(); 
       } 
      }); 
      $('#prov_list').html(htmlstring); 

     }); 

} else { 
    alert("Geocode was not successful for the following reason: " + status); 
} 
}); 
} 

function load_plocations(){ 
    $(plocation).each(function(k,v){ 
     console.log("Calling AddMarker: "+v) 
     addMarker(v,k); 
    }); 
} 

function addMarker(location, name) { 
    console.log("Adding Marker: "+location) 
    marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 
    markersArray.push(marker); 
} 
//Clears the Markers from the map. 
function clearOverlays() { 
    console.log("Clearing Overlays"); 
    if (markersArray) { 
     for (i in markersArray) { 
      markersArray[i].setMap(null); 
     } 
    } 
} 

// Deletes all markers in the array by removing references to them 
function deleteOverlays() { 
    console.log("Deleting Overlays"); 
    if (markersArray) { 
     for (i in markersArray) { 
      markersArray[i].setMap(null); 
     } 
     markersArray.length = 0; 
    } 
} 

回答

2

尝试使用声明VAR 标记

var marker = new google.maps.Marker({ 

这将使本地范围内的对象,从而为每个迭代一个新的。

没有VAR,它成为全局(即作用域为窗口对象)。我不是100%确定的,但我认为这可能会像你写的那样在每次迭代中覆盖相同的标记,而不是创建一个新标记。

+0

就是这样。谢谢! – DiscontentDisciple 2012-07-06 14:58:52

1

地理编码器受速率限制和配额限制。 “动态地”对多个点进行地理编码以显示一个网页从来不是一个好主意,这正是您在循环中试图做的事情,这只会对少量标记起作用。这里是an example (using the v2 API),它对通过AJAX传输的xml中的地址列表进行地理编码。

Here is an article that is part of the google maps API v3 documentation讨论地理编码策略。

最好的解决方案是,如果提前知道点数,将它们离线地理编码并存储页面加载时使用的坐标。如果它们是由用户输入的,则使用API​​内置的客户端地理编码器。

+0

我只是即时对用户输入进行地理编码。其他点从JSON调用返回。因此,每个用户输入只会触发一次地图api。尽管感谢您的领导。 – DiscontentDisciple 2012-07-06 15:00:01