0

ユーザーのIPアドレスを取得し、ユーザーの緯度/経度の位置に基づいてラファエルマップにトランスポーズするnodejsアプリがあります。

ここで見ることができますhttp://zmgc.net/;maps新しいタブを開いて、;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です

アドバイスをいただければ幸いです。

4

1 に答える 1

0

scale() は次の translates() に影響するため、最初に変換してからスケーリングします。

したがって、コードは次のようになります。

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

于 2012-07-07T08:11:00.317 に答える