Question

我尝试将数据从服务器发送到网站，并使用该数据在聚合物地图上自定义标记。我正在使用socket.io，当我尝试更改标记属性时，我的标记就不会显示。

这是一段代码：

<dom-module id="main-map">
<template>
<style>
google-map {
     display: block;
     width: 100%;
     height:100%;
    }
</style>
<google-map map="{{map}}"
 latitude="52.0535631" 
 longitude="19.5249493" 
 zoom="7" 
 disable-default-ui >
      <template is="dom-repeat" items="{{xMarker}}">
           <google-map-marker map={{map}}
            latitude="{{item.latitudine}}"
            longitude="{{item.longitudine}}" 
            animation="{{item.animation}}">
           </google-map-marker>
      </template>
 </google-map>
 </template>
 <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>

Polymer({
    is: 'main-map', 

    properties: {
    xMarker: {
       type: Object,
       value: function () {
           socket.on("asd", function (data) {
                var obj = {};
                obj = [{
                   latitudine: '52.0535631',
                   longitudine: '19.5249493',
                   animation:'BOUNCE',
                }];
                console.log(obj);
                return obj;
               })
                }
            }
        }
    });
    </script>
    </dom-module>

Answer 1

您的xMarker属性为空。当您声明其默认值时，您没有返回任何内容。

Polymer({
  is: 'main-map',

  properties: {
    xMarker: {
      type: Object,
      value: function() {
        socket.on("asd", function(data) {
          var obj = {};
          obj = [{
            latitudine: '52.0535631',
            longitudine: '19.5249493',
            animation: 'BOUNCE',
          }];
          console.log(obj);
          return obj;
        }); 
        // You're not actually returning anything at all. 
      }
    }
  }
});

Answer 2

我可以看到为什么这不起作用的两个原因。首先，xMarker被定义为一个对象，但随后在dom-repeat中使用，它只接受数组。因此，您应将类型设置为Array。除非您只有一个标记，否则省略dom-repeat。

xMarker: {
   type: Array,

其次，您无法通过返回它来为socket.io回调分配值。您可以在ready函数中安装socket.io事件处理程序，并将值分配给xMarker。

properties: {
    xMarker: {
      type: Array
    }
},

ready: function() {
    socket.on("asd", function(data) {
        this.xMarker = [{
            latitudine: '52.0535631',
            longitudine: '19.5249493',
            animation: 'BOUNCE',
        }];
    }.bind(this)); 
}

标记不会在地图上显示

2 个答案: