标记不显示在地图上答案

【问题标题】：Marker don't display on map标记不显示在地图上
【发布时间】：2016-03-18 02:32:26
【问题描述】：

我正在尝试将数据从服务器发送到网站，并使用该数据在聚合物地图上自定义标记。我正在使用 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>

【问题讨论】：

也许我在 PolymerJS 编写代码的方式上遗漏了一些东西，但您不需要实例化您的套接字吗？ var socket = io()?
sockets 工作正常，我之前定义了 socket。我猜这可能是数据绑定的问题

标签： javascript google-maps data-binding polymer

【解决方案1】：

我可以看到这不起作用的两个原因。首先，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】：

您的 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. 
      }
    }
  }
});

【讨论】：