Question

我很想将latlng用于google-map-directions聚合物元素。如果我只是输入一个字符串，例如Austin它就有效，并且有方向。但如果我尝试new google.maps.LatLng(29.520332, -98.431211)则没有方向。要明确，以太没有错误。

在模板中我输出了{{endingAddress}}，它成功输出了一个字符串( ...., ....)，因此数据绑定正确且有效。

有什么建议吗？

    <div id="map-container">
        <google-map latitude="29.520332" longitude="-98.431211" 
          api-key='AIzaXjfkwM'
          fit-to-markers>
          <google-map-marker latitude="29.520332" longitude="-98.431211"
            title="wedding location"></google-map-marker>
        </google-map>
        <google-map-directions
          api-key='AICpwM'
          start-address="Austin"
          end-address$="{{endingAddress}}"></google-map-directions>
      </div>
    </div>
  </template>

  <script>
    Polymer({
      is: 'map-wedding',
      properties: {
        endingAddress: {
          type: Object
        }
      },
      attached: function () {
        var gMap = document.querySelector('google-map');
        gMap.addEventListener('api-load', function(e) {
          document.querySelector('google-map-directions').map = this.map;
          this.endingAddress =  new google.maps.LatLng(29.520332, -98.431211);
        }.bind(this));
      }
    })

Answer 1

根据docs，start-address和end-address属性可以采用地址，也可以采用纬度/经度作为String。您需要使用两个元素的google-map属性将google-map-directions与map元素相关联。

这是一个简单的代码示例，我已经习惯了这个：

<dom-module id="map-test">
  <template>
    <style>
      :host {
        display: block;
      }

      google-map {
        height: 600px;
      }
    </style>

    <google-map-directions
      start-address="Austin" end-address="29.520332,-98.431211" map="{{map}}"></google-map-directions>
    <google-map latitude="29.520332" longitude="-98.431211" fit-to-markers map="{{map}}">
      <google-map-marker latitude="29.520332" longitude="-98.431211" title="wedding location"></google-map-marker>
    </google-map>
  </template>
  <script>
    Polymer({
      is: "map-test"
    });
  </script>
</dom-module>

确保您同时包含google-map和google-map-directions元素。

Answer 2

我做错了两件事....首先是我在end-address="(29.520332,-98.431211)"使用括号时应该只是end-address="29.520332,-98.431211"。

当我在处理程序中绑定this时，我使用了错误的闭包：

    gMap.addEventListener('api-load', function(e) {
      document.querySelector('google-map-directions').map = this.map;
      this.endingAddress =  new google.maps.LatLng(29.520332, -98.431211);
    }.bind(this));

我在处理程序中删除了this绑定并使用了：

    gMap.addEventListener('api-load', function(e) {
      document.querySelector('google-map-directions').map = this.map;
      this.endingAddress =  new google.maps.LatLng(29.520332, -98.431211);
    });

有效。如果关闭错误，document.querySelector('google-map-directions').map = this.map;会获得不同的地图对象。

聚合物google-map-directions - 使用latlng作为结束地址

2 个答案: