Polymer Google Map - Drawing Shapes

Question

私はPolymerのGoogle Mapをしばらく使っており、結果に非常に満足しています。最近、地図上の地図マーカーの間に線や図形を描くと便利ないくつかの使用例があります。これに関するGoogleのドキュメントはMaps Javascript APIには最適ですが、いくつかの調査を行った後、ポリマーGoogleマップ内の図形描画の参照を見つけることができませんでした。これらの形を描く "純粋なポリマー"の方法はありますか？

私はまだポリマー1.xを使用していますが、2.xにアップグレードするつもりです。

ありがとうございました！

Answer 1

現在Googleマップに図形を描くことができるポリマー要素はありません。ただし、JavaScriptを使用してマップオブジェクトにアクセスし、図形を描画することはできます。あなたもこれを取ることができ

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 
    }); 
} 

：

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

、その後、いくつかのJavaScriptはDOMのマップ要素にmapオブジェクトにアクセスすることにより、マップ上に描画するには：たとえば、あなたのgoogle-map要素を含むことができ、必要に応じてJavaScriptを使用してポリマーコンポーネントに変換します。

Answer 2

"マップ"プロパティ - >オブザーバーを追加する - >あなたが望むことを実行できます。

これは、javascriptがGoogleマップが作成されたときにのみGoogleマップに図形を描画しようとしていることを確認するためです。

"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>