Question

试用聚合物并想知道如何在聚合物元素中添加标记元素。我知道如何将标记添加到标准谷歌地图。我应该只将标记对象插入google-map元素标记数组吗？如果是这样，签名是什么？有一个例子吗？我这样做之后是否需要调用某种地图初始化或刷新，还是自动更新？

   (function() {
      Polymer({
        is: 'users-map',

        created: function(){
          this.loadMap(this.data[0]);
        },

        loadMap: function(row) {
          var map = document.querySelector('#users-location-map');
          row.users.forEach(function (user) {
            var location = user.location;
            var markerOptions = {
              position: {lat: location[1], lng: location[0]},
              //map: map //can't set this otherwise it throws an error on finding the google library
            };
            if (!user.online) {
              markerOptions.icon = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|666666';
            }

            map.markers.push(something); //how should I instanstiate this something
//            new google.maps.Marker(markerOptions); //normally I would just do this 
          });
        },

如果我注释掉地图分配，下面的答案就有效。

Answer 1

这取决于您是直接使用google-map和google-map-marker还是谷歌地图API。

如果您使用google-map和google-map-marker元素，则此方法应该有效：

marker = document.createElement('google-map-marker');
marker.longitude = location[0];
marker.latitude = location[1];
marker.icon = 'ICON_UR'
Polymer.dom(this.$.map).appendChild(marker);

如果您直接使用谷歌地图API，那么使用new google.maps.Marker(markerOptions);的正常appraoch应该可以正常工作。

Answer 2

我很早就完成了相同的任务，并通过这个问题找到了解决方案。我希望我的示例将来能够解决。

例如，我们的html中包含google-map聚合物：

<google-map map="{{map}}" latitude="40.730610" longitude="-73.935242" zoom="5" click-events="true" mouse-events="true" api-key="{{you_api_key}}" disable-default-ui>
</google-map>

通过单击并为拖动事件添加EventListener以便在Google地图上动态创建标记，我编写脚本如下：

<script> var map = document.querySelector('google-map');
        map.addEventListener('google-map-click', function (e) {
            let marker = document.createElement('google-map-marker');
            let latLng = e.detail.latLng;
            marker.setAttribute('latitude', latLng.lat());
            marker.setAttribute('longitude', latLng.lng());
            marker.setAttribute('title', "Marker name");
            marker.setAttribute('draggable', true);
            marker.setAttribute('click-events', true);
            marker.setAttribute('mouse-events', true);
            marker.addEventListener('google-map-marker-dragend', function (e) {
                let latLng = e.detail.latLng;
                marker.setAttribute('latitude', latLng.lat());
                marker.setAttribute('longitude', latLng.lng());
            });
            Polymer.dom(map).appendChild(marker);
        });
        </script>

希望对您有所帮助。谢谢。

你如何以编程方式将标记添加到聚合物谷歌地图元素

2 个答案: