Question

将谷歌地图api中的听众与谷歌图表

集成或混合

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

正如您所看到的，在代码的末尾有一个监听器，等待在标记/符号上进行单击以显示标记的名称。

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

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

线索/提示：

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

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

code1（Google Map 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);

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

将谷歌地图api v3中的听众与谷歌图表结合起来

将谷歌地图api中的听众与谷歌图表

code1（Google Map Api）：

代码2（谷歌图表）：

1 个答案: