使用 Polymer Project 自定义 Google 地图标记答案

【问题标题】：Custom Google Maps Marker with Polymer Project使用 Polymer Project 自定义 Google 地图标记
【发布时间】：2015-04-05 07:55:04
【问题描述】：

我想处理地图上标记的点击事件，所以我想扩展 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>

如果我使用 .但是当我想使用时，它会在开发者控制台中给出这个错误代码：

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

如何扩展 google-map-marker？

【问题讨论】：

标签： google-maps google-maps-markers polymer

【解决方案1】：

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

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

【讨论】：