Polymer Google 地图 - 绘制形状

Question

我使用 Polymer 的 Google 地图已有一段时间了，对结果非常满意。最近我遇到了一些用例，在这些用例中，在地图上的地图标记之间绘制线条和形状会很有用。 Google 关于此的文档非常适合地图 Javascript API，但经过一些研究后，我无法找到任何关于在 Polymer 中绘制形状的参考 Google 没有混搭 Polymer 和非 Polymer 的地图 Google 地图功能。是否有 "pure Polymer" 绘制这些形状的方法？

我仍在使用 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>

然后一些 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 转换为聚合物组件。

Answer 2

你可以绑定 "map" 属性 -> 添加观察者 -> 做你想做的。

这是为了确保 javascript 仅在创建 google 地图时尝试在 google 地图上绘制形状。

"map" 属性一开始为空。创建地图后，观察者调用您的函数。

像这样：

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

Polymer Google 地图 - 绘制形状

Polymer Google Map - Drawing Shapes

javascript

google-maps

google-maps-api-3

polymer-1.0