1

このページにあるものと同様の米国の地図に位置マーカーを配置しようとしています

http://www.zingchart.com/blog/2012/07/17/interactive-html5-maps-api/ (マップ セクションにアイテムを配置します。)

これを指定するための JSON 属性が見つかりません (そのリンクはサイトのホームページのみに移動します)。これを行う方法について私を助けてください。または、それに関するドキュメントを教えてください。

[--EDIT--] Lat/Lon 値を使用して地図上の XY 座標を取得する関数を見つけました (zingchart.maps.getXY(mapid, lonlat, itemid))。その XY ポイントにマーカーを配置します。

[--編集--] 以下の回答は期待どおりに機能します。米国の地図にマーカーを配置しようとしています。地理的には米国の上にありますが、別のポリゴンとしてカリフォルニアの下に配置されているため、緯度/経度情報を使用してアラスカ/ハワイ州にマーカーを配置する方法を知りたいです。

4

1 に答える 1

2

私は ZingChart チームに所属しており、間違いなくこの問題を解決することができます!

XY 座標を見つける前に、マップが読み込まれるまで待つことが重要です。ZingChart 'load' API イベント リスナーを使用して、チャートが読み込まれるまで待ちます。

zingchart.load=function() {
    drawPoints();
};

drawPoints 関数内で、経度と緯度の値を見つけます。値が北と東の場合、数値は正になり、南と西は負になります。たとえば、サンパウロは西経 46.6333°、南緯 23.5500° にあるため、[-46.63, -23.55] を使用します。このマップ デモでは、東経 77.5667°、北緯 12.9667° にあるバンガロールにマーカーを配置したので、[77.57, 12.97] を使用します。

var lonlat = [77.57, 12.97];
var bangalore = zingchart.maps.getXY('map', lonlat);

getXY メソッドは長さ 2 の配列を返します。インデックス 0 の値はマップの x 位置、インデックス 1 の値は y 位置です。

変数にバンガロールの XY 座標が含まれているので、addobject API メソッドを使用してその位置にマーカーを配置できます。以下の「zc」は、チャートを配置するために使用される div に指定された ID と同じです。

zingchart.exec('zc', 'addobject', {
    type: 'shape',
    data: [{
        x: bangalore[0],
        y: bangalore[1],
        type: "circle",
        size: 3
    }]
});

コード全体を表示するには、提供されているマップ デモのページ ソースを表示します。

他にご不明な点がございましたら、お気軽にお問い合わせください。

于 2014-09-03T21:16:25.743 に答える