Google Map Geocoded TypeError trong chức năng gọi lại

Question

Tôi có 2 chức năng sau để kéo vào, mã địa lý và đánh dấu địa điểm trong bản đồ google.

Tôi tiếp tục nhận được TypeError: adds[i] is undefined, điều này tất nhiên đang khiến phần còn lại của bản đồ bị đánh bom.

Đây là mã của tôi:

// Place Markers on the Map 
var PlaceMarkers = function (iw, adds, gc) { 
    var image = {url: "http://meatmysite.com/Images/star2.png", size: new google.maps.Size(24, 24)}; 
    var aCt = adds.length; 
    for(var i = 0; i < aCt; ++i) { 
     GetLatLng(gc, adds[i].address, function(pos) { 
      if(pos) { 
       var ipop = '<h1>' + adds[i].title + '</h1>'; // <----- TypeError: adds[i] is undefined 
       if(!isBlank(adds[i].url)){ 
        ipop += '<a href="' + adds[i].url + '" target="_blank">' + adds[i].url + '</a><br />'; 
       } 
       ipop += '<div class="map_item_content" id="mi_content' + i + '">' + adds[i].content + '</div>'; 
       if(!isBlank(adds[i].mainphone)){ 
        ipop += '<br /><strong>Phone:</strong> <a href="tel:'+adds[i].mainphone+'">' + adds[i].mainphone + '</a>'; 
       } 
       if(!isBlank(adds[i].mainemail)){ 
        ipop += '<br /><strong>Email:</strong> <a href="mailto:'+adds[i].mainemail+'">' + adds[i].mainemail + '</a>'; 
       } 
       console.log('HEY NOW: ' + pos.toString() + ' - Location Found!'); 
       var mark = new google.maps.Marker({title: adds[i].title, position: pos, map: map, icon: image, html: ipop});    
       google.maps.event.addListener(mark, 'click', function(){ 
        iw.setContent(this.html); 
        iw.open(map, this); 
       }); 
      } 
     }); 
    } 
}; 
// Get Lat/Lng Location 
var GetLatLng = function(gc, add, f) { 
    var ret = ''; 
    gc.geocode({'address': add}, function(res, status) { 
     if (status == 'OK') { 
      f(res[0].geometry.location); 
      console.log('Found Here: ' + ret.toString()); 
     } 
    }); 
    return -1; 
}; 

DEMO TRẢ LẠI DỮ LIỆU CHO thêm

[ 
{ 
    "address": "1 My Street Gilbert, AZ 85234", 
    "title": "My Title 1", 
    "url": "http://www.myurl.com/", 
    "mainphone": null, 
    "mainemail": null, 
    "content": "1 My Street<br />Gilbert, AZ 85234" 
}, 
{ 
    "address": "2 My Street North Richland Hills, TX 76182", 
    "title": "My Title 2", 
    "url": null, 
    "mainphone": null, 
    "mainemail": null, 
    "content": "2 My Street<br />North Richland Hills, TX 76182" 
} 
] 

Answer 1

Một lựa chọn, vượt qua hoàn thành "địa chỉ" đối tượng vào GetLatLng chức năng, và từ đó thành callback của nó (vì vậy bạn sẽ có được chức năng đóng trên đó):

// Get Lat/Lng Location 
var GetLatLng = function (gc, add, f) { 
    gc.geocode({ 
     'address': add.address 
    }, function (res, status) { 
     if (status == 'OK') { 
      f(res[0].geometry.location, add); 
     } 
    }); 
}; 

Sau đó sử dụng nó như thế này bên trong gọi lại (bạn có thể vượt qua chỉ là chỉ số vào mảng cũng):

GetLatLng(gc, adds[i], function (pos, add) { 
    if (pos) { 
     var ipop = '<h1>' + add.title + '</h1>'; 
     if (!isBlank(add.url)) { 
      ipop += '<a href="' + add.url + '" target="_blank">' + add.url + '</a><br />'; 
     } 
     ipop += '<div class="map_item_content" id="mi_content' + i + '">' + add.content + '</div>'; 
     if (!isBlank(add.mainphone)) { 
      ipop += '<br /><strong>Phone:</strong> <a href="tel:' + add.mainphone + '">' + add.mainphone + '</a>'; 
     } 
     if (!isBlank(add.mainemail)) { 
      ipop += '<br /><strong>Email:</strong> <a href="mailto:' + add.mainemail + '">' + add.mainemail + '</a>'; 
     } 
     console.log('HEY NOW: ' + pos.toString() + ' - Location Found!'); 
     var mark = new google.maps.Marker({ 
      title: add.title, 
      position: pos, 
      map: map, 
      icon: image, 
      html: ipop 
     }); 
     google.maps.event.addListener(mark, 'click', function() { 
      iw.setContent(this.html); 
      iw.open(map, this); 
     }); 
    } 
}); 

proof of concept fiddle

Đoạn

mã:

var geocoder = new google.maps.Geocoder(); 
 
var map; 
 
var infoWindow = new google.maps.InfoWindow(); 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    PlaceMarkers(infoWindow, adds, geocoder); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
// Place Markers on the Map 
 
var PlaceMarkers = function(iw, adds, gc) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var image = { 
 
    url: "http://meatmysite.com/Images/star2.png", 
 
    size: new google.maps.Size(24, 24) 
 
    }; 
 
    var aCt = adds.length; 
 
    for (var i = 0; i < aCt; ++i) { 
 
    GetLatLng(gc, adds[i], function(pos, add) { 
 
     if (pos) { 
 
     var ipop = '<h1>' + add.title + '</h1>'; // <----- TypeError: adds[i] is undefined 
 
     if (!isBlank(add.url)) { 
 
      ipop += '<a href="' + add.url + '" target="_blank">' + add.url + '</a><br />'; 
 
     } 
 
     ipop += '<div class="map_item_content" id="mi_content' + i + '">' + add.content + '</div>'; 
 
     if (!isBlank(add.mainphone)) { 
 
      ipop += '<br /><strong>Phone:</strong> <a href="tel:' + add.mainphone + '">' + add.mainphone + '</a>'; 
 
     } 
 
     if (!isBlank(add.mainemail)) { 
 
      ipop += '<br /><strong>Email:</strong> <a href="mailto:' + add.mainemail + '">' + add.mainemail + '</a>'; 
 
     } 
 
     console.log('HEY NOW: ' + pos.toString() + ' - Location Found!'); 
 
     var mark = new google.maps.Marker({ 
 
      title: add.title, 
 
      position: pos, 
 
      map: map, 
 
      // icon: image, 
 
      html: ipop 
 
     }); 
 
     bounds.extend(mark.getPosition()); 
 
     map.fitBounds(bounds); 
 
     google.maps.event.addListener(mark, 'click', function() { 
 
      iw.setContent(this.html); 
 
      iw.open(map, this); 
 
     }); 
 
     } 
 
    }); 
 
    } 
 
}; 
 
// Get Lat/Lng Location 
 
var GetLatLng = function(gc, add, f) { 
 
    gc.geocode({ 
 
    'address': add.address 
 
    }, function(res, status) { 
 
    if (status == 'OK') { 
 
     f(res[0].geometry.location, add); 
 
    } 
 
    }); 
 
}; 
 

 
var adds = [{ 
 
    "address": "1 My Street Gilbert, AZ 85234", 
 
    "title": "My Title 1", 
 
    "url": "http://www.myurl.com/", 
 
    "mainphone": null, 
 
    "mainemail": null, 
 
    "content": "1 My Street<br />Gilbert, AZ 85234" 
 
}, { 
 
    "address": "2 My Street North Richland Hills, TX 76182", 
 
    "title": "My Title 2", 
 
    "url": null, 
 
    "mainphone": null, 
 
    "mainemail": null, 
 
    "content": "2 My Street<br />North Richland Hills, TX 76182" 
 
}]; 
 

 
function isBlank(str) { 
 
    return (!str || /^\s*$/.test(str)); 
 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

Answer 2

for(var i = 0; i < aCt - 1; ++i). Bạn cần thêm "-1" vào trong vòng lặp. Mảng bắt đầu từ chỉ mục 0 và không 1. Bạn cũng cần phải cẩn thận với việc sử dụng các hàm trong vòng lặp for. Trong vòng một vòng lặp for-loop không có phạm vi từ chính nó. Chỉ các hàm mới tạo phạm vi mới.

Answer 3

Điều này trông giống như một vấn đề ràng buộc điển hình. Vào thời điểm gọi lại, giá trị của adds[i] sẽ thay đổi. Có khả năng là vòng lặp đã kết thúc và i hiện có giá trị là last index + 1, không trỏ đến gì cả. Lưu ý rằng nó cũng có thể trỏ đến chỉ mục sai, điều đó sẽ không thành công nhưng sử dụng dữ liệu sai.

Bạn phải ràng buộc giá trị adds[i] cục bộ cho mỗi lần lặp lại hoặc gọi lại sẽ chỉ sử dụng tham chiếu đến giá trị toàn cầu. Có một số cách để đi về điều này, đây là một cách đơn giản, nơi chúng tôi tiếp tục đi qua adds[i] cùng với một đối số chức năng.

Thay adds[i].address với adds[i] khi gọi GetLatLng và thêm một tham số thứ hai add để gọi lại:

GetLatLng(gc, adds[i], function(pos, add) { 
    ... 
}); 

Sau đó sửa đổi GetLatLng sử dụng add.address thay vì chỉ add và thêm add cuộc gọi callback:

// Get Lat/Lng Location 
var GetLatLng = function(gc, add, f) { 
    var ret = ''; 
    gc.geocode({'address': add.address}, function(res, status) { 
     if (status == 'OK') { 
      f(res[0].geometry.location, add); 
      console.log('Found Here: ' + ret.toString()); 
     } 
    }); 
    return -1; 
}; 

Sau đó, trong chức năng gọi lại, hãy thay thế tất cả các phiên bản adds[i] với add để sử dụng biến cục bộ.

Tôi đã không thiết lập thử nghiệm nhưng về mặt lý thuyết sẽ hoạt động.

Answer 4

có vẻ như bạn đang làm việc quá mức. Bất kỳ lý do nào khiến bạn không thể làm điều này?

// Place Markers on the Map 
var PlaceMarkers = function (iw, adds, gc) { 
    var aCt = adds.length; 
    for(var i = 0; i < aCt; ++i) { 
    var obj=adds[i]; 
     GetLatLng(gc, obj) 
    } 
}; 

// Get Lat/Lng Location 
var GetLatLng = function(gc, obj) { 
    var ret = ''; 
    gc.geocode({'address': obj.address}, function(res, status) { 
     if (status == 'OK') { 
     var pos=res[0].geometry.location; 
      var ipop = '<h1>' + obj.title + '</h1>'; // <----- TypeError: adds[i] is undefined 
       if(!isBlank(obj.url)){ 
        ipop += '<a href="' + obj.url + '" target="_blank">' + obj.url + '</a><br />'; 
       } 
       ipop += '<div class="map_item_content" id="mi_content">' + obj.content + '</div>'; 
       if(!isBlank(obj.mainphone)){ 
        ipop += '<br /><strong>Phone:</strong> <a href="tel:'+obj.mainphone+'">' + obj.mainphone + '</a>'; 
       } 
       if(!isBlank(obj.mainemail)){ 
        ipop += '<br /><strong>Email:</strong> <a href="mailto:'+obj.mainemail+'">' + obj.mainemail + '</a>'; 
       } 
       console.log('HEY NOW: ' + pos.toString() + ' - Location Found!'); 
       var mark = new google.maps.Marker({title: obj.title, position: pos, map: map, html: ipop});     
       google.maps.event.addListener(mark, 'click', function(){ 
        iw.setContent(this.html); 
        iw.open(map, this); 
       }); 
     } else { 
     console.log("geocoder problem!") 
     } 
    }); 
};