在Google散点图上点击显示Google地图信息窗口

时间：2017-06-16 19:41:36

标签： javascript google-maps charts

我遇到的问题如下： 当用户点击散点图中的某个点时，我想在Google地图中显示相应的信息窗口。因此，当点击散点图中的某个点时，单击地图中的标记时会打开相同的窗口。

我现在的代码如下。在JS的底部是注册散点图中点的点击的部分。这是问题开始的地方。我不知道如何触发m0变量点击监听器。

var map;
google.charts.load('current', {'packages':['bar', 'scatter']});
//google.charts.setOnLoadCallback(drawScatter);
function isEven(n) {
  return n % 2 == 0;
}

function isOdd(n) {
  return Math.abs(n % 2) == 1;
}


function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 52.0918, lng: 5.1146},
        zoom: 10
    });


      // Draw bar diagram
      function drawChart0(marker, name) {
        var parent = document.createElement("div"),
          title = document.createElement("h1"),
          t = document.createTextNode(name),
          w = document.createElement("div"),
          wChart = new google.charts.Bar(w),
          o = document.createElement("div"),
          oChart = new google.charts.Bar(o),
          c = document.createElement("div"),
          cChart = new google.charts.Bar(c),
          i = document.createElement("div"),
          iChart = new google.charts.Bar(i),
          pi = document.createElement("div"),
          piChart = new google.charts.Bar(pi),
          a = document.createElement("div"),
          aChart = new google.charts.Bar(a),
          bi = document.createElement("div"),
          biChart = new google.charts.Bar(bi),
          dw = document.createElement("div"),
          dwChart = new google.charts.Bar(dw),
          infoWindow  = new google.maps.InfoWindow();

    var wData = google.visualization.arrayToDataTable([
      ["Jaar", "Waarde huis"],
      ["2011", 188400],
      ["2012", 189050]
    ]);

    var wOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var oData = google.visualization.arrayToDataTable([
      ["Jaar", "Oppervlakte waarde"],
      ["2011", 3200],
      ["2012", 3220]
    ]);

    var oOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var cData = google.visualization.arrayToDataTable([
      ["Jaar", "Criminaliteit"],
      ["2011", 430],
      ["2012", 401]
    ]);

    var cOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var iData = google.visualization.arrayToDataTable([
      ["Jaar", "Inbraak"],
      ["2011", 46],
      ["2012", 37]
    ]);

    var iOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var piData = google.visualization.arrayToDataTable([
      ["Jaar", "Poging inbraak"],
      ["2011", 12],
      ["2012", 9]
    ]);

    var piOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var aData = google.visualization.arrayToDataTable([
      ["Jaar", "Autokraak"],
      ["2011", 131],
      ["2012", 91]
    ]);

    var aOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var biData = google.visualization.arrayToDataTable([
      ["Jaar", "Bedrijfsinbraak"],
      ["2011", 9],
      ["2012", 17]
    ]);

    var biOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var dwData = google.visualization.arrayToDataTable([
      ["Jaar", "Winkeldiefstal"],
      ["2011", 18],
      ["2012", 14]
    ]);

    var dwOptions = {
      colors: ["#4CAF50", "#4CAF50"]
    }

    parent.appendChild(title.appendChild(t));
    parent.appendChild(w);
    parent.appendChild(o);
    parent.appendChild(c);
    parent.appendChild(i);
    parent.appendChild(pi);
    parent.appendChild(a);
    parent.appendChild(bi);
    parent.appendChild(dw);

    wChart.draw(wData, wOptions);
    oChart.draw(oData, oOptions);
    cChart.draw(cData, cOptions);
    iChart.draw(iData, iOptions);
    piChart.draw(piData, piOptions);
    aChart.draw(aData, aOptions);
    biChart.draw(biData, biOptions);
    dwChart.draw(dwData, dwOptions);

      infoWindow.setContent(parent);
      infoWindow.open(map, marker);
  }

      var m0 = new google.maps.Marker({
    map: map,
    position: {lat: 52.1010322, lng:5.0999601},
    title: "2e Daalsebuurt e.o., Utrecht",
    icon: "http://maps.google.com/mapfiles/ms/icons/red.png"
  });

  m0.addListener("click", function() {
    //i0.open(map, m0);
    drawChart0(this, "2e Daalsebuurt e.o." );
  });
  
  google.charts.setOnLoadCallback(drawScatter);
	        	function drawScatter() {
		        	var data = google.visualization.arrayToDataTable([
		        		['Woningwaarde', 'Criminaliteit 2011', 'Criminalteit 2012'],
		        			[188400, {v:430,f: "2e Daalsebuurt e.o., Utrecht"}, null],
				        			[189050, null, {v:401,f: "2e Daalsebuurt e.o., Utrecht"}]]);

			        
        var options = {
          hAxis: {title: 'Woningwaarde'},
          vAxis: {title: 'Criminaliteit'}
        }

    var chart = new google.charts.Scatter(document.getElementById('scatter'));
    google.visualization.events.addListener(chart, 'select', function() {
    var row = chart.getSelection()[0].row;
    console.log(row);

    if( row > 0 && isOdd(row) ) {
      row = row - 1;
    }
    console.log(row);

    if( row == 0) {
      var c = document.createEvent("MouseEvents");
      c.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
      m0.dispatchEvent(c);
    }
});
chart.draw(data, google.charts.Scatter.convertOptions(options));
				}
	      	}
<!DOCTYPE html>
<html>
	<head>
		<title>D3.js</title>
	</head>

	<body>
		<div id="map" style="height:400px;width:100%;"></div>
		<div id="scatter" style="width:100%;height:400px;"></div>

		<!--<script src="//d3js.org/d3.v4.min.js"></script>-->
		<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
		<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAB9kYP7clJyhX45mt6y3LobeKA9L6ivNo&callback=initMap" async defer></script>
     </body>
</html>

1 个答案:

答案 0 :(得分：1)

要在Google Maps Javascript API v3中的标记上触发点击事件，请使用trigger方法：

google.maps.event.trigger(m0,'click');

documentation：

  

触发器（实例：对象，eventName：字符串，var_args：...）
  返回值：无
  触发给定事件。 eventName之后的所有参数都作为参数传递给侦听器。

更新的代码段

＆＃13;
＆＃13; 
var map;
google.charts.load('current', {
  'packages': ['bar', 'scatter']
});
//google.charts.setOnLoadCallback(drawScatter);
function isEven(n) {
  return n % 2 == 0;
}

function isOdd(n) {
  return Math.abs(n % 2) == 1;
}


function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 52.0918,
      lng: 5.1146
    },
    zoom: 10
  });


  // Draw bar diagram
  function drawChart0(marker, name) {
    var parent = document.createElement("div"),
      title = document.createElement("h1"),
      t = document.createTextNode(name),
      w = document.createElement("div"),
      wChart = new google.charts.Bar(w),
      o = document.createElement("div"),
      oChart = new google.charts.Bar(o),
      c = document.createElement("div"),
      cChart = new google.charts.Bar(c),
      i = document.createElement("div"),
      iChart = new google.charts.Bar(i),
      pi = document.createElement("div"),
      piChart = new google.charts.Bar(pi),
      a = document.createElement("div"),
      aChart = new google.charts.Bar(a),
      bi = document.createElement("div"),
      biChart = new google.charts.Bar(bi),
      dw = document.createElement("div"),
      dwChart = new google.charts.Bar(dw),
      infoWindow = new google.maps.InfoWindow();

    var wData = google.visualization.arrayToDataTable([
      ["Jaar", "Waarde huis"],
      ["2011", 188400],
      ["2012", 189050]
    ]);

    var wOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var oData = google.visualization.arrayToDataTable([
      ["Jaar", "Oppervlakte waarde"],
      ["2011", 3200],
      ["2012", 3220]
    ]);

    var oOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var cData = google.visualization.arrayToDataTable([
      ["Jaar", "Criminaliteit"],
      ["2011", 430],
      ["2012", 401]
    ]);

    var cOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var iData = google.visualization.arrayToDataTable([
      ["Jaar", "Inbraak"],
      ["2011", 46],
      ["2012", 37]
    ]);

    var iOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var piData = google.visualization.arrayToDataTable([
      ["Jaar", "Poging inbraak"],
      ["2011", 12],
      ["2012", 9]
    ]);

    var piOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var aData = google.visualization.arrayToDataTable([
      ["Jaar", "Autokraak"],
      ["2011", 131],
      ["2012", 91]
    ]);

    var aOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var biData = google.visualization.arrayToDataTable([
      ["Jaar", "Bedrijfsinbraak"],
      ["2011", 9],
      ["2012", 17]
    ]);

    var biOptions = {
      colors: ["#F44336", "#F44336"]
    }

    var dwData = google.visualization.arrayToDataTable([
      ["Jaar", "Winkeldiefstal"],
      ["2011", 18],
      ["2012", 14]
    ]);

    var dwOptions = {
      colors: ["#4CAF50", "#4CAF50"]
    }

    parent.appendChild(title.appendChild(t));
    parent.appendChild(w);
    parent.appendChild(o);
    parent.appendChild(c);
    parent.appendChild(i);
    parent.appendChild(pi);
    parent.appendChild(a);
    parent.appendChild(bi);
    parent.appendChild(dw);

    wChart.draw(wData, wOptions);
    oChart.draw(oData, oOptions);
    cChart.draw(cData, cOptions);
    iChart.draw(iData, iOptions);
    piChart.draw(piData, piOptions);
    aChart.draw(aData, aOptions);
    biChart.draw(biData, biOptions);
    dwChart.draw(dwData, dwOptions);

    infoWindow.setContent(parent);
    infoWindow.open(map, marker);
  }

  var m0 = new google.maps.Marker({
    map: map,
    position: {
      lat: 52.1010322,
      lng: 5.0999601
    },
    title: "2e Daalsebuurt e.o., Utrecht",
    icon: "http://maps.google.com/mapfiles/ms/icons/red.png"
  });

  m0.addListener("click", function() {
    //i0.open(map, m0);
    drawChart0(this, "2e Daalsebuurt e.o.");
  });

  google.charts.setOnLoadCallback(drawScatter);

  function drawScatter() {
    var data = google.visualization.arrayToDataTable([
      ['Woningwaarde', 'Criminaliteit 2011', 'Criminalteit 2012'],
      [188400, {
        v: 430,
        f: "2e Daalsebuurt e.o., Utrecht"
      }, null],
      [189050, null, {
        v: 401,
        f: "2e Daalsebuurt e.o., Utrecht"
      }]
    ]);


    var options = {
      hAxis: {
        title: 'Woningwaarde'
      },
      vAxis: {
        title: 'Criminaliteit'
      }
    }

    var chart = new google.charts.Scatter(document.getElementById('scatter'));
    google.visualization.events.addListener(chart, 'select', function() {
      var row = chart.getSelection()[0].row;
      console.log(row);

      if (row > 0 && isOdd(row)) {
        row = row - 1;
      }
      console.log(row);

      if (row == 0) {
        var c = document.createEvent("MouseEvents");
        c.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        google.maps.event.trigger(m0,'click');
        m0.dispatchEvent(c);
      }
    });
    chart.draw(data, google.charts.Scatter.convertOptions(options));
  }
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title>D3.js</title>
</head>

<body>
  <div id="map" style="height:400px;width:100%;"></div>
  <div id="scatter" style="width:100%;height:400px;"></div>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题