Question

案例：您在表单上输入2个城市并提交;谷歌地图获取坐标，将出现2个标记（每个城市一个），连接这些标记的折线。如果有其他城市的新提交，我希望替换标记和折线以匹配新坐标。

问题：当我提交第一次搜索时，一切都很好，获得坐标并绘制标记+折线。当我提交另一个搜索时，标记将被替换，但不会替换折线。

我还没有写任何JS，试图最好地使用Polymer（也许这是一个错误，但那为什么它可以用标记而不是折线？）;
所有导入（聚合物元素和自定义元素）都已生成，并且没有文件丢失;
控制台中任何时候都没有显示错误;
我还试图在clear()元素上使用API提供的<google-map>方法，没有任何结果（我想我的自定义元素不被视为地图的一部分）;
我不想要显示多条折线或多对标记，我只想在进行另一次搜索时清除/替换第一条;
当我在控制台中使用markersPolyline.markers = []清除数组然后提交新搜索时，它运行良好。

代码有什么问题？我误解了数据绑定吗？这是我使用Polymer的方法吗？

的index.html

<body>
    <template is="dom-bind">
        <google-map latitude="39.639538" longitude="6.328125" zoom="3" api-key="…" disable-default-ui>
            <distance-search from-city="Paris, France" to-city="NYC, USA"></distance-search>
            <markers-cities></markers-cities>
            <markers-polyline></markers-polyline>
        </google-map>
    </template>
</body>

<distance-search>是我的自定义元素，显示包含两个城市的表单（预先填充以供演示）。通过调用Google Maps API对城市进行地理编码，并返回一个数组。这一方似乎没有错，地理编码和返回的数组运行良好。

<markers-cities>是我的自定义元素，它会在右侧坐标上显示标记（基于 distance-search 元素返回的内容）。

<markers-polyline>是我的自定义元素，它会从第一个标记到第二个标记绘制折线（基于 distance-search 元素返回的内容）。

distance-search.html（仅限JS）

无需在此处输入所有代码：AJAX调用运行良好。我只将结果存储在2个数组中并将它们发送到我的自定义元素

<script>
Polymer({

    is: 'distance-search',

   /** triggered wen the AJAX returns something **/
    _onResponseRetrieved: function(event) {
        var coords = event.detail.response,
            markersCities = document.querySelector('markers-cities'),
            markersPolyline = document.querySelector('markers-polyline');

        markersPolyline.markers =
        markersCities.markers =
        [
            {
                "lat": coords.lat1,
                "lng": coords.lng1
            }, {
                "lat": coords.lat2,
                "lng": coords.lng2
            }
        ];
    }

});
</script>

的标记-cities.html

<dom-module id="markers-cities">
    <template>
        <template is="dom-repeat" items="{{markers}}" as="marker">
            <google-map-marker map="{{map}}" latitude="{{marker.lat}}" longitude="{{marker.lng}}"></google-map-marker>
        </template>
    </template>
    <script>
        Polymer({
            is: 'markers-cities',
            properties: {
                markers : {
                    type: Array
                }
            }
        });
    </script>
</dom-module>

标记-polyline.html

<dom-module id="markers-polyline">
    <template>
        <google-map-poly map="{{map}}" stroke-color="#FF0000" stroke-opacity="0.5" geodesic>
            <template is="dom-repeat" items="{{markers}}" as="marker">
                <google-map-point latitude="{{marker.lat}}" longitude="{{marker.lng}}"></google-map-point>
            </template>
        </google-map-poly>
    </template>
    <script>
        Polymer({
            is: 'markers-polyline',
            properties: {
                markers : {
                    type: Array
                }
            }
        });
    </script>
</dom-module>

Answer 1

<markers-polyline>中的数据绑定对我来说是正确的。它可能是您可能想要在GitHub中报告的错误（类似于issue #299）。

当我在控制台中使用markersPolyline.markers = []清除数组然后提交新搜索时，它的效果很好。

使用这个线索，我能够实现一个解决方法，清除markers，然后在微任务结束时设置一个新的数组值（Polymer.Base.async）。

<head>
  <base href="https://polygit.org/polymer+1.6.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="google-map/google-map.html">
  <link rel="import" href="google-map/google-map-marker.html">
  <link rel="import" href="google-map/google-map-poly.html">
  <link rel="import" href="google-map/google-map-point.html">
</head>
<body unresolved>
<style>
  body {
    padding: 0;
    margin: 0;
  }
</style>
<x-foo></x-foo>

<dom-module id="x-foo">
  <template>
    <style>
      google-map {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
      }

      paper-button {
        background: red;
        color: white;
        margin: 10px;
        font-family: 'Roboto', 'Noto', sans-serif;
      }
    </style>

    <google-map zoom="8"
                latitude="37.77493"
                longitude="-122.41942"
                fit-to-markers
                api-key="AIzaSyCjhMOhRrvFgImADyUqAAaEsZAC9SP_TNc">
      <template is="dom-repeat" items="[[markers]]" as="marker">
        <google-map-marker latitude="[[marker.lat]]" longitude="[[marker.lng]]"></google-map-marker>
      </template>
      <google-map-poly closed fill-color="blue" fill-opacity=".5">
        <template is="dom-repeat" items="[[markers]]" as="marker">
          <google-map-point latitude="[[marker.lat]]" longitude="[[marker.lng]]"></google-map-point>
        </template>
      </google-map-poly>
    </google-map>

    <paper-button on-tap="updatePolyline">Update Polyline</paper-button>
  </template>
  <script>
  HTMLImports.whenReady(function() {
    Polymer({
      is: 'x-foo',

      properties: {
        markers: {
          type: Array
        }
      },

      ready: function() {
        this.markers = [
          { lat: 36.77493, lng: -121.41942 },
          { lat: 38.77493, lng: -122.41942 },
          { lat: 36.77493, lng: -123.41942 }
        ];
      },

      updatePolyline: function() {
        var m = this.markers.slice(0, 2);
        this.setMarkers([
          { lat: m[0].lat + 0.05, lng: m[0].lng },
          { lat: m[1].lat - 0.05, lng: m[1].lng }
        ]);
      },

      setMarkers: function(markers) {
        this.markers = [];
        this.async(function() {
          this.markers = markers;
        });
      }
    });
  });
  </script>
</dom-module>
</body>

codepen

为什么它适用于标记而不是折线？

<google-map-marker>和<google-map-point>的观察者实施方式不同，这可能就是他们行为不完全相同的原因。

<google-map-point> s的容器（即<google-map-poly>）uses a MutationObserver to detect when map-points are added/removed，此时它会重建多边形路径。

另一方面，<google-map-marker> s的容器（即<google-map>）observes changes to its <iron-selector>.items（包含标记）。

清除Polymer Google Map上的折线

1 个答案: