Question

我有一个nodejs应用程序，它接受用户的ip地址，并根据用户的lat / lon位置将其转移到raphael地图上。

你可以在http://zmgc.net/;maps看到它，如果你打开一个新标签并访问;地图页面中的http://zmgc.net主页，你应该得到一个居中的红人svg。

奇怪的是，城市和'用户标题'被正确显示，但是人在地图中间呈现！

这是绘制人物标记的代码：

  this.drawMarker = function (message) {
    var latitude = message.latitude,
        longitude = message.longitude,
        text = message.title, //Fixme, this is the user's name
        city = message.city,
        x, y;

    var mapCoords = this.geoCoordsToMapCoords(latitude, longitude);
    x = mapCoords.x;
    y = mapCoords.y;

    var person = self.map.path(personPath);
    person.scale(0.06, 0.06);
    person.translate(-255, -255); // Reset location to 0,0
    person.translate(x, y);
    console.log(x, y);
    person.attr({
      fill: 'red',
      stroke: 'transparent'
    });

    var title = self.map.text(x, y + 11, text);
    title.attr({
      fill: 'red',
      "font-size": 12,
      "font-family": "'Helvetica Neue', 'Helvetica', sans-serif",
      'font-weight': 'bold'
    });
    var subtitle = self.map.text(x, y + 21, city);
    subtitle.attr({
      fill: '#999',
      "font-size": 7,
      "font-family": "'Helvetica Neue', 'Helvetica', sans-serif"
    });

完整代码为https://github.com/nkhine/phoenix/blob/master/ui/core/js/node/public/client.js

任何建议都非常感激。

Answer 1

首先翻译然后缩放，因为scale（）将影响以下翻译（）

所以在代码中会是：

var person = self.map.path(personPath);
person.translate(-255, -255); // Reset location to 0,0
person.translate(x, y);
console.log(x, y);
person.scale(0.06, 0.06);
person.attr({
  fill: 'red',
  stroke: 'transparent'
});

但正确的正确溶解应该是移动路径本身，而不是改变其坐标系。这里用一个例子来解释： http://cancerbero.vacau.com/raphaeltut/#sec-types-path-moving

person.translate（x，y）在Raphael.js中没有正确映射

1 个答案: