Question

我想在地图上处理标记的点击事件，所以我想扩展google-map-marker。这是my-map-marker.html：

    <link rel="import" href="../bower_components/google-map/google-map.html">

    <polymer-element name="my-map-marker" extends="google-map-marker">
    <script>
        Polymer({
          click: function() {
            console.log("latitude:", this.latitude);
          },
        });
      </script>
    </polymer-element>

and I use it in another element as:

<paper-input value={{query}} label="Where?" floatingLabel></paper-input>

            <google-map-search map="{{map}}" query="{{query}}" results="{{results}}"></google-map-search>

            <google-map map="{{map}}" fitToMarkers>
                <template repeat="{{results}}">
                    <my-map-marker latitude="{{latitude}}" longitude="{{longitude}}" clickEvents="true">
                        <h2>{{name}}</h2> {{formatted_address}}
                    </my-map-marker>
                </template>
            </google-map>

如果我使用的话，我的代码在地图上显示匹配的标记，因为我输入了位置名称。但是当我想使用时，它会在开发者控制台中提供此错误代码：

未捕获的TypeError：无法读取nullgoogle-map.html的属性“setMap”：197 Polymer.detachedpolymer.js：9961 base.detachedCallbackpolymer.js：7348 TemplateIterator.extractInstanceAtpolymer.js：7393 TemplateIterator.handleSplicespolymer.js：7301 TemplateIterator。 valueChangedpolymer.js：7284 TemplateIterator.updateValuepolymer.js：7275 TemplateIterator.updateIteratedValuepolymer.js：4913 Observer.report_polymer.js：5180 createObject.check_polymer.js：4811 callback

如何扩展google-map-marker？

Answer 1

基于Polymer文档：“如果您使用extends来创建派生自现有DOM元素的聚合物元素（HTMLElement以外的其他元素）”，则此语法有效：

<google-map-marker is="my-map-marker" map="{{map}}" latitude="{{latitude}}" longitude="{{longitude}}">
    <h2>{{name}}</h2> {{formatted_address}}
</google-map-marker>

使用Polymer Project自定义Google Maps Marker

1 个答案: