Japan Map プラグインにposition: relativeを適用させてクリッカブルの座標を移動させたい

Japan Map プラグインにposition: relativeを適用するとクリッカブル領域が狂います。
現在jqueryのJapan Mapというプラグインを使ってWEBページにクリッカブルな日本地図を表示させようとしているのですが、親要素のdivでposition: relativeを使って地図(canvas)を動かして表示しようとすると（地域と県の二段階層にするため）適性の県の位置や地域の位置でクリックできなくなってしまいます。
画面の一番上の左端（この要素以外なにも存在しないとき）のときは親要素をposition: relativeにしても適性の場所でクリックができるので親要素をposition: relativeにするとクリッカブル座標はスクリーンの左上に固定になると思われます。

html
1<body>
2    <div id="map-container"></div>
3    <script>
4        $(function(){
5            $("#map-container").japanMap({
6              width: 800,
7                onSelect : function(data){
8                    alert(data.name);
9                }
10            });
11        });
12    </script>
13</body>

css
1body #map-container {
2	margin: 0 auto;
3	width: 800px;
4        height: 600px;
5	position:relative;
6	border: 1px solid black;
7}

divでposition: relativeを使用した際にクリッカブル座標も同時に移動させる方法はありますでしょうか。
facebookで「mousemove イベント処理内のpointer の座標を引数e を利用することで解消できた」という投稿を見つけましたがそれ以上の詳しい情報は見つけられませんでした。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

こうしてみればどうでしょう。また、position:relative;は中央寄せとは関係ないと思います。

HTML
1<div id="map-container-wrap"><div id="map-container"></div></div>

CSS
1body #map-container-wrap {
2    margin: 0 auto;
3    width: 800px;
4    height: 600px;
5    position:relative;
6    border: 1px solid black;
7}
8body #map-container {
9    width: 800px;
10    height: 600px;
11}

投稿2019/11/16 11:46

kei344

総合スコア69596

ryo12su29kel

2019/11/16 14:39

確かによく考えたmarginとは関係ありませんでした。指摘ありがとうございます。（その部分は編集させていただきました。）地域をクリックしたらその地域の県のみをアップするという二段階構造を作るためにどうしてもposition指定をしてcanvasを動かす必要があるのですが、やはり、#map-container-wrapで二重構造にしても親要素をposition: relativeにするとクリッカブル領域がおかしくなるようです。画面の一番上の左端（この要素以外なにも存在しないとき）のときはposition: relativeにしても適性の場所でクリックができるので親要素をposition: relativeにするとクリッカブル座標はスクリーンの左上に固定になると思われます。

行動規範の内容に同意します