聚合物谷歌地圖 - 繪製形狀

我一直在使用聚合物的谷歌地圖一段時間了，並一直非常滿意的結果。最近我遇到了一些用例，在地圖上的地圖標記之間繪製線條和形狀將很有用。 Google的文檔對於Maps Javascript API來說非常棒，但是在做了一些研究之後，我沒有在Polymer Google Map中找到任何對繪圖形狀的引用，而沒有使用混合聚合和非聚合Google Map功能。有沒有「純聚合物」的方式來繪製這些形狀？聚合物谷歌地圖 - 繪製形狀

我仍在使用Polymer 1.x，但願意升級到2.x.

謝謝！

來源

2017-05-08 Geoffrey Huntoon

目前沒有聚合物元素可讓您在Google地圖上繪製形狀。但是，您可以使用JavaScript訪問地圖對象並繪製形狀。例如，您可以包括你google-map元素：

<google-map 
    id="map" 
    zoom="3" 
    latitude="25" 
    longitude="0" 
    map-type="hybrid"></google-map>

，然後一些JavaScript通過訪問DOM中的地圖元素的map對象可在地圖上繪製：

function drawCircle(center, radius) { 
    new google.maps.Circle({ 
    strokeColor: '#FFFFFF', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FFFFFF', 
    fillOpacity: 0.3, 
    map: document.querySelector('#map').map, 
    center: center, 
    radius: radius 
    }); 
}

你甚至可以利用這個JavaScript並將其轉換爲聚合物組件（如果需要的話）。

來源

2017-05-09 09:39:23

謝謝！這種解決方案比我發現的其他解決方案簡單得多。我會試一試！ –

你可以綁定「地圖」屬性 - >添加觀察者 - >做你想做的。

這是爲了確保JavaScript只是在創建谷歌地圖時試圖在谷歌地圖上繪製形狀。

「map」屬性最初爲null。觀察者在創建地圖後調用你的函數。

像這樣：

<google-map map={{myMapObject}} id="mymapid" zoom="3" latitude="25" longitude="0" map-type="hybrid"></google-map> 
<script> 
Polymer({ 
    is: 'mytemplatename', 
    properties: { 
     myMapObject: { 
      observer: 'drawCircles' 
     } 
    }, 
    drawCircles: function(){ 
     new google.maps.Circle({ 
     strokeColor: '#FFFFFF', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FFFFFF', 
     fillOpacity: 0.3, 
     map: document.querySelector('#mymapid').map, 
     center: center, 
     radius: radius 
     }); 
    } 
}); 
</script>

來源

2017-06-03 10:10:21

聚合物谷歌地圖 - 繪製形狀

回答

相關問題