将 Google Maps api v3 中的侦听器与 Google 图表相结合 [关闭]

Question

将来自 google map api 的侦听器与 google chart table 集成或混合

我用 google maps api v3 创建了一个非常简单的地图，在 code1 中进行了解释。

如您所见，在代码的末尾有一个监听器等待点击标记/符号以显示标记的名称。

我还有一张用 Google Chart 制作的表格（在代码 2 中解释），其中包含与地图相关的信息。

我需要（但找不到）是当我点击地图或表格时，必须突出显示/选择与之相关的内容。

线索/提示：

• 使用 new_map 作为全局变量（无效）
• google.maps 与 google.visualization 有何不同？
• 必须使用 google.maps 制作，因为来自 google.visualization 的地图不允许旋转标记。

**** 我会给予特别的分数 :) ****

code1（谷歌地图API）：

function init_nuevo_mapa() {
    var mapOptions = {
        zoom: 13
        center: new google.maps.LatLng(-33.5351136, -70.5876618)
    };

    var new_map = new google.maps.Map(document.getElementById('new-map'), mapOptions);
    var myLatLng = new google.maps.LatLng(-33.5351136, -70.5876618)
    var image = {
        path: 'M 0,0 -10,-30 10,-30 z',
        rotation: 10, //10º clockwise
        fillColor: "red",
        fillOpacity: 0.5,
        scale: 1,
        strokeColor: "red",
        strokeWeight: 4
    };
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        zIndex: zIndex,
        title: location[2]
    });
    google.maps.event.addListener(marker, 'click', function () {
        map.setZoom(13);
        alert(marker.getTitle());
        alert(marker.getPosition());
        //marker.setVisible(false);
    });
}

代码2（谷歌图表）：

 function drawChart() {
        var datos_resumen = new google.visualization.DataTable();
        datos_resumen.addColumn('string', 'Acción');
        datos_resumen.addColumn('string', 'Celda');
        datos_resumen.addColumn('number', 'Prioridad actual');
        datos_resumen.addColumn('number', 'Prioridad nueva');
        datos_resumen.addColumn('number', 'Distancia [km]');

        datos_resumen.addRow([
            "Cambiar",
        resultado_vecino[i][2],
        resultado_vecino[i][3],
        resultado_vecino[i][4],
        Number(resultado_vecino[i][6].toPrecision(3))]);

        var tabla_resumen = new google.visualization.Table(document.getElementById('resumen_div'));
        tabla_resumen.draw(datos_resumen, {
            showRowNumber: true
        });


        google.visualization.events.addListener(tabla_resumen, 'select', selectHandler);

        function selectHandler(e) {
            var selected = tabla_resumen.getSelection()[0];
            if (selected) {
                var celda = datos_resumen.getValue(selected.row, 1)

                alert(celda);

                var temp = $.ajax({
                    url: 'sql_coord_cell.php?celda=' + celda,
                    type: 'post',
                    dataType: 'json',
                    async: false
                }).responseText;

                var js_geo_data = JSON.parse(temp);

                var location = new google.maps.LatLng(js_geo_data['lat'], js_geo_data['lon']);
                var infowindow = new google.maps.InfoWindow
                infowindow.setOptions({
                    content: celda,
                    position: location
                });
                infowindow.open()
            }

        }
    }

Answer 1

我终于做到了。

我只需要在这样的函数之外定义一个空的全局变量

var new_map;

因为这行不通：

var new_map = new google.maps.Map(document.getElementById('new-map'), mapOptions);

这样我可以从其他对象访问地图对象以在它们之间进行交互