聚合物谷歌地圖方向 - 使用latlng結束地址

Question

我triyng使用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。您需要使用這兩個元素上的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)"使用圓括號時它應該只是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;正在獲取不同的地圖對象。