Question

我一直在使用Polymer的谷歌地图一段时间，并对结果非常满意。最近我遇到了一些用例，在地图上的地图标记之间绘制线条和形状会很有用。谷歌关于这方面的文档非常适用于Maps Javascript API，但经过一些研究后，我无法在聚合物谷歌地图中找到任何关于绘制形状的参考，而没有使用混合聚合物和非聚合物谷歌地图功能。是否采用“纯聚合物”方式绘制这些形状？

我仍在使用Polymer 1.x但我愿意升级到2.x。

谢谢！

Answer 1

目前没有聚合物元素可以让您在Google地图上绘制形状。但是，您可以使用JavaScript访问地图对象并绘制形状。例如，您可以添加google-map元素：

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

然后通过访问DOM中地图元素上的map对象在地图上绘制一些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
  });
}

如果需要，您甚至可以使用此JavaScript并将其转换为Polymer Component。

Answer 2

您可以绑定“地图”属性 - ＆gt;添加观察者 - ＆gt;做你想做的事。

这是为了确保只有在创建谷歌地图时，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>

聚合物谷歌地图 - 绘图形状

2 个答案: