使用 Polymer 更改 google-地图中心

Question

我正在使用 Polymer 处理自定义元素。我想在渲染后改变它的中心。我在 Polymer 文档上找不到它。有人可以帮助我吗？

<dom-module id="my-map">
<template>
    <google-map latitude="{{latitude}}" longitude="{{longitude}}" zoom="15">
    </google-map>
</template>

<script>
Polymer({
    is: "my-map"

    // I want to change map center here
});

    // or here.. I don't know
</script>

Answer 1

在您的 <script> 标签中，您可以创建一个现成的回调函数。参见 lifecycle callbacks

Polymer adds an extra callback, ready, which is invoked when Polymer has finished creating and initializing the element’s local DOM.

在这里您可以更改要传递给 google-map 元素的 my-map 元素的 longitude 和 latitude 属性：

<dom-module id="my-map">
    <style>
        google-map {
            height: 600px;
            width: 600px;
        }
    </style>
    <template>
        <google-map latitude="{{latitude}}" longitude="{{longitude}}" zoom="15"></google-map>
    </template>
</dom-module>

<script>
    Polymer({
        is: "my-map",
        ready: function () {
            this.latitude = 37.77493;
            this.longitude = -122.41942;
        }
    });
</script>

或者，如果您可以为 longitude 和 lattitude 属性提供默认值 (see here)：

<script>
    Polymer({
        is: "my-map",
        properties: {
            longitude: {
                type: Number,
                value: -122.41942
            },
            latitude: {
                type: Number,
                value: 37.77493
            }
        }
    });
</script>

使用 Polymer 更改 google-地图中心

Change google-map center using Polymer

polymer