2016-10-24 3 views
1

私はマップマップ(USALOW)を持っており、動的にロードしています。クリックした状態で元に戻ってくるIDを取得するにはどうすればよいですか?私は以下のコードを追加すると、それは私の未定義を警告し続ける:ここAmMapsに動的にロードされたデータeven.MapObject.id undefined

map.addListener("clickMapObject", function (event) { 
      alert(event.mapObject.id); 
     }); 

は私のマップスクリプトです:

$.ajax({ 
    url: mapData, 
    cache: false, 
    type: 'GET', 
    dataType: 'json', 
    contentType: "application/json; charset=utf-8", 
    success: function (data) { 
     $.each(data, function (index, item) { 
      //getLabelColor(item.StateCode, assignMapColor(item.Obligation)); 
      newmapdata.push({ 
       id: "US-" + item.GeoCode, 
       title: item.GeoName, 
       value: item.GrantTotal, 
       balloonText: "<b>" + item.GeoName + 
        "</b>" + "<br>Grant Amount: $" + item.GrantTotal.toLocaleString(), 
       color: "#0a71b2" 
      }); 
     }); 

     var map = AmCharts.makeChart("grantsMap", { 
      type: "map", 
      "theme": "light", 
      dragMap: true, 
      fixedSize: false, 

      colorSteps: 10, 
      "responsive": { 
       "enabled": true, 
       // Rules 
       "rules": [ 
       // at 500px wide, we hide baloons 
       { 
        "maxWidth": 500, 
        "overrides": { 
         "balloon": { 
          "enabled": false 
         }, 
         "imagesSettings": { 
          "labelPosition": "middle", 
          "labelFontSize": 8 
         } 

        } 
       } 
       ] 
      }, 
      // End of Rules 
      "areasSettings": { 
       "autozoom": true, 
       outlineColor: "#000000", 
       "selectable": true 
      }, 
      dataProvider: { 
       map: "usaLow", 
       areas: newmapdata, 
       getAreasFromMap: true, 
       images: [ 
       { 
        label: "AL", 
        latitude: -40, 
        longitude: 81, 
        linkToObject: "US-AL" 
       }, { 
        label: "AK", 
        latitude: -84, 
        longitude: -130, 
        linkToObject: "US-AK" 
       }, { 
        label: "AZ", 
        latitude: -4, 
        longitude: -85, 
        linkToObject: "US-AZ" 
       }, { 
        label: "AR", 
        latitude: -11, 
        longitude: 41, 
        linkToObject: "US-AR" 
       }, { 
        label: "CA", 
        latitude: 70, 
        longitude: -135, 
        linkToObject: "US-CA" 
       }, { 
        label: "CO", 
        latitude: 60, 
        longitude: -42, 
        linkToObject: "US-CO" 
       }, { 
        "label": "CT", 
        "latitude": 71, 
        "longitude": 180, 
        "linkToObject": "US-CT", 
        //labelBackgroundColor: "#cccccc", 
        labelBackgroundAlpha: .8 
       }, { 
        label: "DE", 
        //labelBackgroundColor: "#cccccc", 
        latitude: 38, 
        longitude: 180, 
        linkToObject: "US-DE", 
        labelBackgroundAlpha: .8 
       }, { 
        //labelBackgroundColor: "#cccccc", 
        label: "DC", 
        latitude: -20, 
        longitude: 180, 
        linkToObject: "US-DC", 
        labelBackgroundAlpha: .8 
       }, { 
        label: "FL", 
        latitude: -78, 
        longitude: 120, 
        linkToObject: "US-FL" 
       }, { 
        label: "GA", 
        latitude: -40, 
        longitude: 102, 
        linkToObject: "US-GA" 
       }, { 
        label: "HI", 
        latitude: -88.7, 
        longitude: -35.7, 
        linkToObject: "US-HI" 
       }, { 
        label: "ID", 
        latitude: 85, 
        longitude: -85, 
        linkToObject: "US-ID" 
       }, { 
        label: "IL", 
        latitude: 65, 
        longitude: 60, 
        linkToObject: "US-IL" 
       }, { 
        label: "IN", 
        latitude: 67, 
        longitude: 78, 
        linkToObject: "US-IN" 
       }, { 
        label: "IA", 
        latitude: 77, 
        longitude: 35, 
        linkToObject: "US-IA" 
       }, { 
        label: "KS", 
        latitude: 48, 
        longitude: 5, 
        linkToObject: "US-KS" 
       }, { 
        label: "KY", 
        latitude: 42, 
        longitude: 87, 
        linkToObject: "US-KY" 
       }, { 
        label: "LA", 
        latitude: -65, 
        longitude: 43, 
        linkToObject: "US-LA" 
       }, { 
        label: "ME", 
        latitude: 88.3, 
        longitude: 168, 
        linkToObject: "US-ME" 
       }, { 
        label: "MD", 
        //labelBackgroundColor: "#cccccc", 
        latitude: 10, 
        longitude: 180, 
        linkToObject: "US-MD", 
        labelBackgroundAlpha: .8 
       }, { 
        label: "MA", 
        latitude: 83.5, 
        longitude: 180, 
        linkToObject: "US-MA", 
        labelBackgroundAlpha: .8, 
        //labelBackgroundColor: "#cccccc", 

       }, { 
        label: "MI", 
        latitude: 82.7, 
        longitude: 85, 
        linkToObject: "US-MI" 
       }, { 
        label: "MO", 
        latitude: 48, 
        longitude: 40, 
        linkToObject: "US-MO" 
       }, { 
        label: "MN", 
        latitude: 87, 
        longitude: 28, 
        linkToObject: "US-MN" 
       }, { 
        label: "MS", 
        latitude: -40, 
        longitude: 61, 
        linkToObject: "US-MS" 
       }, { 
        label: "MT", 
        latitude: 88.2, 
        longitude: -55, 
        linkToObject: "US-MT" 
       }, { 
        label: "NE", 
        latitude: 75, 
        longitude: 0, 
        linkToObject: "US-NE" 
       }, { 
        label: "NV", 
        latitude: 75, 
        longitude: -107, 
        linkToObject: "US-NV" 
       }, { 
        label: "NH", 
        //labelBackgroundColor: "#cccccc", 
        latitude: 86.2, 
        longitude: 180, 
        linkToObject: "US-NH", 
        labelBackgroundAlpha: .8 
       }, { 
        label: "NJ", 
        //labelBackgroundColor: "#cccccc", 
        latitude: 58, 
        longitude: 180, 
        linkToObject: "US-NJ", 
        labelBackgroundAlpha: .8 
       }, { 
        label: "NM", 
        latitude: -10, 
        longitude: -46, 
        linkToObject: "US-NM" 
       }, { 
        label: "NY", 
        latitude: 85, 
        longitude: 140, 
        linkToObject: "US-NY" 
       }, { 
        label: "NC", 
        latitude: 23, 
        longitude: 128, 
        linkToObject: "US-NC" 
       }, { 
        label: "ND", 
        latitude: 88, 
        longitude: -5, 
        linkToObject: "US-ND" 
       }, { 
        label: "OH", 
        latitude: 70, 
        longitude: 98, 
        linkToObject: "US-OH" 
       }, { 
        label: "OK", 
        latitude: -6, 
        longitude: 11, 
        linkToObject: "US-OK" 
       }, { 
        label: "OR", 
        latitude: 87, 
        longitude: -122, 
        linkToObject: "US-OR" 
       }, { 
        label: "PA", 
        latitude: 78, 
        longitude: 128, 
        linkToObject: "US-PA" 
       }, { 
        label: "RI", 
        //labelBackgroundColor: "#cccccc", 
        latitude: 79, 
        longitude: 180, 
        linkToObject: "US-RI", 
        labelBackgroundAlpha: .8 
       }, { 
        label: "SC", 
        latitude: -12, 
        longitude: 117, 
        linkToObject: "US-SC" 
       }, { 
        label: "SD", 
        latitude: 84.5, 
        longitude: -5, 
        linkToObject: "US-SD" 
       }, { 
        label: "TN", 
        latitude: 12, 
        longitude: 83, 
        linkToObject: "US-TN" 
       }, { 
        label: "TX", 
        latitude: -65, 
        longitude: 0, 
        linkToObject: "US-TX" 
       }, { 
        label: "UT", 
        latitude: 66, 
        longitude: -77, 
        linkToObject: "US-UT" 
       }, { 
        label: "VT", 
        latitude: 87, 
        longitude: 150.5, 
        linkToObject: "US-VT" 
       }, { 
        label: "VA", 
        latitude: 55, 
        longitude: 128, 
        linkToObject: "US-VA" 
       }, { 
        label: "WA", 
        latitude: 89, 
        longitude: -112, 
        linkToObject: "US-WA" 
       }, { 
        label: "WV", 
        latitude: 60, 
        longitude: 112, 
        linkToObject: "US-WV" 
       }, { 
        label: "WI", 
        latitude: 85, 
        longitude: 53, 
        linkToObject: "US-WI" 
       }, { 
        label: "WY", 
        latitude: 82.5, 
        longitude: -47, 
        linkToObject: "US-WY" 
       } 
       ], 
       lines: [ 
        { 
         //DC LINE 
         latitudes: [66.8921, -20], 
         longitudes: [135.6241, 173] 
        }, { 
         //CT LINE 
         latitudes: [82.8921, 71], 
         longitudes: [153.8241, 173] 
        }, { 
         //DE LINE 
         latitudes: [69.0921, 38], 
         longitudes: [145.2241, 173] 
        }, { 
         //MD LINE 
         latitudes: [69.8921, 10], 
         longitudes: [136.8241, 172.5] 
        }, { 
         //MA LINE 
         latitudes: [84.0921, 83], 
         longitudes: [153.8241, 173] 
        }, { 
         //NH LINE 
         latitudes: [86.0921, 86.2], 
         longitudes: [156.8241, 173] 
        }, { 
         //NJ LINE 
         latitudes: [76.0921, 58], 
         longitudes: [147.8241, 173] 
        }, { 
         //RI LINE 
         latitudes: [83.0921, 78], 
         longitudes: [162.8241, 173.5] 
        } 
       ] 
      }, 

      zoomControl: { 
       zoomControlEnabled: true, 
       panControlEnabled: false 
      }, 

      "imagesSettings": { 
       "labelPosition": "middle", 
       "labelFontSize": 11 
      } 

     }); 

     map.addListener("clickMapObject", function (event) { 
      alert(event.mapObject.id); 
      document.getElementById("info").innerHTML = '<p> <img src="http://www.cdc.gov/drugresistance/solutions-initiative/infographics/drug-resistant-lab-network-infographic.jpg" /> </p>'; 
      document.getElementById("pdfDownload").innerHTML = event.mapObject.id + '<a href="newsletter_01.pdf" target="_blank">Download</a>' 
     }); 
    } 
}); 

}

答えて

2

あなたの状態が正常に動作しているが、あなたのイメージ(ラベル)がありますIDが設定されていなければデフォルトでは未定義であるため、undefinedを返します。あなたのイメージを与えることはIDは、問題が修正されています。

images: [{ 
     id: "AL", 
     label: "AL", 
     latitude: -40, 
     longitude: 81, 
     linkToObject: "US-AL" 
    }, { 
     id: "AK", 
     label: "AK", 
     latitude: -84, 
     longitude: -130, 
     linkToObject: "US-AK" 
    }, 
     // ... 
    ] 

ここdemoです。

+0

awesome !!これは動作します!ありがとうございました! – cxwilson

関連する問題