Question

我在Symfony3项目中使用IvoryGoogleMapBundle来渲染地图。在控制器中配置$map对象并在我的twig文件中使用这些句子后......

{{ ivory_google_map(map) }}
{{ ivory_google_api([map]) }}

它产生类似的东西......

<div id="map_canvas" style="width: 100%;height: 100vh;"></div>
<style type="test/css">
    #map_canvas {
    width: 100%;
    height: 100vh;
    }
</style>
<script type="text/javascript">
    function ivory_google_map_map58e92cb0aa95e139417147 () {
    map58e92cb0aa95e139417147_container = {
        "base": {
            "coordinates": [],
            "bounds": [],
            "points": [],
            "sizes": []
        },
        "map": null,
        "overlays": {
            "icons": [],
            "symbols": [],
            "icon_sequences": [],
            "circles": [],
            "encoded_polylines": [],
            "ground_overlays": [],
            "polygons": [],
            "polylines": [],
            "rectangles": [],
            "info_windows": [],
            "info_boxes": [],
            "marker_shapes": [],
            "markers": [],
            "marker_cluster": null
        },
        "layers": {
            "heatmap_layers": [],
            "kml_layers": []
        },
        "events": {
            "dom_events": [],
            "dom_events_once": [],
            "events": [],
            "events_once": []
        },
        "functions": []
    };
    map58e92cb0aa95e139417147_container.functions.info_windows_close = function () {};
    map58e92cb0aa95e139417147_container.functions.to_array = function (o) {
        var a = [];
        for (var k in o) {
            a.push(o[k]);
        }
        return a;
    };
    map58e92cb0aa95e139417147_container.base.coordinates.coordinate58e92cb0aaca1311661317 = coordinate58e92cb0aaca1311661317 = new google.maps.LatLng(40.416862923413, -3.7034607678652, true);
    map58e92cb0aa95e139417147_container.map = map58e92cb0aa95e139417147 = new google.maps.Map(document.getElementById("map_canvas"), {
        "fullscreenControl": true,
        "fullscreenControlOptions": {
        "position": google.maps.ControlPosition.RIGHT_TOP
    },
        "mapTypeId": google.maps.MapTypeId.HYBRID,
        "zoom": 5
    });
    map58e92cb0aa95e139417147.setCenter(coordinate58e92cb0aaca1311661317);

    }
</script>

<script type="text/javascript">
    function ivory_google_map_load () {
    google.load("maps", "3", {
        "other_params": "language=en&key=__MY_API_KEY__,
        "callback": ivory_google_map_init
    })
    };
    function ivory_google_map_init_source (src) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.src = src;
    document.getElementsByTagName("head")[0].appendChild(script);
    };
    function ivory_google_map_init_requirement (c, r) {
    if (r()) {
        c();
    } else {
        var i = setInterval(function () {
            if (r()) {
                clearInterval(i);
                c();
            }
        }, 100);
    }
    };
    function ivory_google_map_init () {
    ivory_google_map_init_requirement(ivory_google_map_map58e92cb0aa95e139417147, function () {
        return typeof google.maps !== typeof undefined;
    });
    };
    ivory_google_map_init_source("https://www.google.com/jsapi?callback=ivory_google_map_load");
</script>

现在，从javascript控制台我可以使用...

到达某些属性，例如边界

map58e92cb0aa95e139417147_container.map.getBounds().getNorthEast().lat();
>> 48.2861355244946

但是地图容器对象在每个渲染上都有一个随机名称，所以......我怎么能猜出这个名字才能写一些javascript来玩地图呢？

Answer 1

该库只有一个方法来设置变量名。

这样做......

$map = new Map();
$map->setVariable('my_map');

我可以在javascript中访问该属性

my_map.getBounds().getNorthEast().lat();

容易！

IvoryGoogleMapBundle：渲染后如何访问Google Map Object

1 个答案: