ポリマーgoogle-map-directions - 最終アドレスにlatlngを使用

Question

私はポリマー材料のgoogle-map-directionsのlatlngを使用するtriyngです。私がちょうど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としてLATを取り込むことができます。両方の要素のmap属性を使用してgoogle-mapをgoogle-map-directions要素にリンクする必要があります。ここで

は、私はこの作業を取得するために使用した簡単なコードの例です：

<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

私は2つのことを間違っていました....最初は、にかっこを使用していましたが、ちょうどend-address="29.520332,-98.431211"だったはずです。

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

がハンドラに結合し、使用：：私はハンドラ内で 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;は別のマップオブジェクトを取得していました。