Question

我正在尝试将infowindow和工具提示添加到我的谷歌地图中的标记。我有tooltip.js和recipient_country.js文件。在firebug中没有错误，但浏览器中没有显示任何内容。它应该显示带有标记的地图，每个标记都有工具提示和infowindow.But它说ReferenceError：key is未在createInfoWindow（marker，key）中定义;

 function createInfoWindow(marker,key){
    //create an infowindow for this marker.
    var infowindow = new google.maps.InfoWindow({
           content:recipient_country[key].Country_Name,
           maxwidth:250

    });
    //open infowindow on click event on marker.
    google.maps.event.addListener(marker,'click',function(){
      if(lastOpenInfoWin) lastOpenInfoWin.close();
      lastOpenInfoWin = infowindow;
      infowindow.open(marker.get('map'),marker);
    });
}

 // Here is where we create a tooltip for each marker,
 //with content set to recipient_country[placeindex].value
    function createTooltip(marker,key){
      //create a tooltip
      var tooltipOptions = {
        marker:marker,
        content:recipient_country[key].Country_Name,
        cssClass:'tooltip'   //name of a css class to apply to tooltip
      };
      var tooltip = new Tooltip(tooltipOptions);
    }
    // used to keep trackk of the open Infowindow,so when
    // new one is about to be open, we close the old one.

    // Create map on DOM load
    // I'm using an array of recipient_country(recipient_counrty.js) to populate the markers

    function createMap(){
        var geocoder = new google.maps.Geocoder();
        var map = new google.maps.Map(document.getElementById('map_canvas'),{
        center:new google.maps.LatLng(33.93911,67.709953),
        mapTypeId:google.maps.MapTypeId.ROADMAP,
        zoom:2,
        disableDefaultUI:true,
        zoomControl:true,
        zoomControlOptions: {
          style:google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControl:true,
        mapTypeControlOptions:{
           style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
           position:google.maps.ControlPosition.TOP_CENTER
        }
       });

       for(var j= 0; j < recipient_country.length; j++) {
        (function(i) {
         var building = recipient_country[i];

        geocoder.geocode({'address':building.Country_Name}, function(results,status){

          if(status == google.maps.GeocoderStatus.OK){
            var marker = new MarkerWithLabel({
              position:new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng()),
              title:building.Country_Name,
              map:map,
              labelContent:building.value,
              labelAnchor:new google.maps.Point(6,22),
              labelClass:"labels",
              labelInBackground:false,
              icon:"pics/circle2.png"
            });
              createInfoWindow(marker,key);
              createTooltip(marker,key);
          }
          else{
                 console.log("Geocode was not  succcessful for the following reason:" + status);
             }
        });
       })(j);
   }

       }

示例JSON数据（来自评论）：

var recipient_country = [{"Country_Name": "MYANMAR", "value": 143}, {"Country_Name": "MONGOLIA", "value": 46}, {"Country_Name": "ZIMBABWE", "value": 1}, {"Country_Name": "Bahrain", "value": 1}];

Answer 1

这适用于我（使用键作为循环中的索引，并使用匿名函数内的变量名称保存对地理编码操作的变量的闭包）：

 for (var key = 0; key < recipient_country.length; key++) {
     (function (key) {
         var building = recipient_country[key];

         geocoder.geocode({
             'address': building.Country_Name
         }, function (results, status) {

             if (status == google.maps.GeocoderStatus.OK) {
                 var marker = new MarkerWithLabel({
                     position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                     title: building.Country_Name,
                     map: map,
                     labelContent: building.value,
                     labelAnchor: new google.maps.Point(6, 22),
                     labelClass: "labels",
                     labelInBackground: false,
                     icon: "pics/circle2.png"
                 });
                 createInfoWindow(marker, key);
                 createTooltip(marker, key);
             } else {
                 console.log("Geocode was not  succcessful for the following reason:" + status);
             }
         });
     })(key);
 }

working fiddle

如何将Infowindow和工具提示添加到多个标记

1 个答案: