画像上の特定の座標の値を表示

Question

私は複数のマーカーピンを追加している画像があります。そして、後でデータベースの位置（x座標とy座標）を保存しています。ここで

は今までの私のコードです： https://jsfiddle.net/at3wsepm/7/

は、ユーザーが保存ボタンをクリックした後、ピン名がデータベースに保存されていると一緒にコーディネート。私は必要なもの

_this.position.x = _this.element.position().left; 
_this.position.y = _this.element.position().top; 

は、ユーザーがページをリロードするとき、私は私のデータベースからこれらのマーカーの位置を取得し、同じ画像上に再びそれを配置したい、です。私はPHPを使って検索を行い、ピンとその座標をJSONとして取得することができますが、どうやってイメージ上に再び配置できますか？

Answer 1

データの保存と取得の正確さにもよりますが、データベースのX座標とY座標をJavaScriptに戻すことができると仮定すると、leftとtopを設定する必要があります属性は.cssです。これが機能するには、static以外のpositionも設定する必要があります。

$("#carea").append(elem.css({ 
    position: "relative", // `left` and `top` require a `position` other than `static` 
    left: databaseX, // The pin's X coordinate in the database 
    top: databaseY // The pin's Y coordinate in the database 
})); 

これはhereを見ることができるように、データベースの値によって指定された位置にバックグラウンドにピンを追加します。

これは、ページロード時にマップ要素の左上を基準にして指定された位置にピンを追加することに注意してください。;指定された座標がマップの外にある場合、その要素の外側に表示されます。マップはそのスクロール内でそれらを非表示にしません。

希望すると便利です。 :)