published on in 前端技术
tags: Polymer

Polymer Demo - Simple Google Map

最近在学习Polymer,感觉还挺有意思的。主要涉及的是Web Components方面的知识,将所需的组件封装起来,并保存到单独的html文件中,使用的时候只要将这个html文件通过link标签导入进来(像css样式一样),在适当的位置编写相应的自定义标签,就可以了,非常的方便。

先讲一下Polymer创建自定义元素的方法,

<polymer-element name="my-counter" attributes="counter">
    <template>
        <style> /*...*/ </style>
        <div id="label"><content></content></div>
        Value: <span id="counterVal">{{counter}}</span><br>
        <button on-tap="{{increment}}">Increment</button>
    </template>
    <script>
        Polymer({
            counter: 0, // Default value
            counterChanged: function() {
                this.$.counterVal.classList.add('highlight');
            },
            increment: function() {
                this.counter++;
            }
        });
    </script>
</polymer-element>

格式就是这样,最外面是polymer-element标签,name属性指定的就是自定义标签的名字,attributes指定的是这个自定义标签的属性。template里面有style标签,和其他一些元素,style中为元素的样式。接下来是script标签,里面就一个函数Polymer,参数是一个对象,用于初始化这个标签,counter对应标签的counter属性,并给它赋值,上面template中可以通过{{counter}}访问这个counter值,类似,{{increment}}就是这里的increment方法,那前面的“on-tap”的意思就是当这个button被按下时执行increment方法。

下面是一个小Demo,谷歌地图,通过输入经纬度来显示。

<template>
    <style>
    #map{
        border:1px solid black;
    }
    </style>
    <paper-input id="longtitude" label="Enter longtitude"></paper-input>
    <paper-input id="latitude" label="Enter latitude"></paper-input>
    <paper-button id="getmap" on-tap="{{showMap}}" raisedbutton="" class="colored" label="go" role="button" tabindex="0" aria-label="go"></paper-button>
    <div id="map" style='width:{{width}}px;height:{{height}}px;'></div>
</template>

模版很简单,两个paper-input,一个paper-button,一个div用于展示地图。这里用到的paper-input、paper-button,要通过link标签导入进来。

Polymer({
    width: 500, 
    height:500,
    showMap: function() {
        var lon = this.$.longtitude.value;
        var lat = this.$.latitude.value;
        var map = this.$.map;
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(lat, lon)
        };
        new google.maps.Map(map,mapOptions);
    }
});

width和height指定地图的长宽,通过this.$.[id]来取得模版中的元素,获取了输入的经纬度就可以调用谷歌的方法,在id为map的div中展示地图了。

在首页,我们需要做的就是把刚刚写的html文件通过link标签import进来,不过在此之前别忘了把platform.js导入进来,这样自定义标签才能正常工作。编写一个刚刚创建的标签,

<my-gmap width="415" height="415"></my-gmap>

这里设置了width和height属性,就是地图区域的长宽。看一下最终的效果:

源码地址:https://github.com/homfen/polymer-demo-google-map

Polymer中文社区:http://polymerchina.org