2

Google geochart を使用して、地図にマーカーを配置しています。毎回マップを再描画することなく、マップ上のマーカーを動的に追加および削除できるようにしたいと考えています。それを達成する方法はありますか？

ありがとうこれが私のコードです：

<div align="center">
  <div id="chart_div">
    <div id="loadingDiv"></div>
  </div>
</div>

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript">
  //Load the Google Maps stuff
  google.load('visualization', '1', {'packages': ['geochart']});
  google.setOnLoadCallback(drawRegionsMap);

  //Load the Google Maps stuff
  google.load('visualization', '1', {'packages': ['geochart']});
  google.setOnLoadCallback(drawRegionsMap);


  function drawRegionsMap() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'latitude');
    data.addColumn('number', 'longitude');
    data.addColumn('string', 'Location');
    data.addColumn('number', 'Size');

    //While iterating thru clients flag if user is in list, If not flagged add user to map.
    //Firefox doesn't seem to be including user in list
    var inList = false;
    for (i in clientInfo){ client = clientInfo[i];

      //Because new clients are creating with this connection, we don't want to add them to map.
      //Their clientInfo won't have an ipAddress. Only want to map one client per session
      if (client.ipAddress){
        //Flag if user is in client list
        if(client.ipAddress == userInfo.ipAddress){
          inList = true;
        }
        data.addRow([parseFloat(client.latitude), parseFloat(client.longitude), client.cityName, 4]);
      }
    }

    //If user is not in client list add him now.
    if(!inList){
      if(userInfo.ipAddress){
      data.addRow([parseFloat(userInfo.latitude), parseFloat(userInfo.longitude), userInfo.cityName, 4]);
      }
    }


    var options = {
      displayMode: 'markers',
      colorAxis: {colors: ['red', 'blue']},
      sizeAxis: {minValue: 0, maxValue: 5, minSize: 1, maxSize: 4},
      enableRegionInteractivity: true,
      legend: 'none'
    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    google.visualization.events.addListener(chart, 'regionClick', function (eventData) {
      alert('You clicked: ' + eventData.region);
    });
    chart.draw(data, options);
  }
</script>
4

1 に答える 1

0

ダッシュボードを作成し、それにコントロール (たとえば、CategoryFilter ) をバインドできます。コントロールのフィルターが変更されると、グラフは自動的に更新されます。

ただし、これには制限があり、ユース ケースを考えると、おそらく描画関数を自分で呼び出す必要があります。

于 2012-11-17T15:52:37.067 に答える