カナダマップカスタムオーバーライドCSS関連

コカソ地図

個人的に地図が必要な場合は、NAVERが提供するAPIよりも、Kakaoで提供するKakao地図の方が好きです.これは主観的な理由ですが、KACA側のAPIの説明や例などの使い方の過程で、より親しみを感じます.
でも使っていると確かに制限的な考えがあります.これは私個人の、主観的なためかもしれないし、私の実力が不足しているためかもしれないが、私は大きな背景の下で指導方針を提出し、それを離れて、個人の操作が少し難しい.

クマは気分が悪い

特に、個人的にいろいろなデザインを加えたいとき、そこに追加の機能を追加したいときは限られていると思います.例えば、タグは指定された画像でタグのデザインを変更することができますが、細部でサイズや位置を調整するのは不便です.
また、inpowindowの場合、私が好きなデザインでcssを修正したときも、何度も復唱が爆発しました.
また,関数の場合も同様である.彼らが作った方法のほかに、他の方法で操作しようとすると、いろいろなわけのわからない間違いに直面します.

カスタムオーバーライド

上記の理由から、私が言ったように、地図に重ねることをカスタマイズできるので、好きなようにコントロールすることができます.
しかし、私も気に入らない.基本的なcss(デザイン、フォントサイズなど)は私のニーズに合わせて制御できますが、ダイナミック性を実現するには、
さすがに聞き入れない.だから私は小さなトリックを公開したいです.

トリック

https://apis.map.kakao.com/web/sample/customOverlay1/
まず上のリンクのように,KACAが提供する方法で上書きを生成する.
この場合contentにclassまたはidを指定することができます.これはそれを利用する小さな手口です.

/* 예시 코드 */

var content = '<div id="controlCustomOverlay"><img src = "test.com/test.img"></div>'
var customOverlay = new kakao.maps.CustomOverlay({
    map: map,
    position: position,
    content: content
}); // 일단 이렇게 생성을 해준 뒤

// content 상위 div 찾기
var contentUpperSection = $('#controlCustomOverlay').parent('div');

簡単です.上記のサンプルコードのように、idまたはclassをcontentに割り当てて地図にアップロードし、プロパティまたはidを使用して要素を検索し、すぐに親divを指定すればいいです.次に、その使用例を見てみましょう.
例)

私が作成したCustom overlayでHovershiz-indexを優先的に選択できるように調整します.

var content = '<div class="controlOverlay"><img src = "test.com/test.img"></div>'

var customOverlay = new kakao.maps.CustomOverlay({
    map: map,
    position: position,
    content: content
}); // 커스텀 오버레이 생성

$('.controlOverlay').mouseover(function(){
	$(this).parent('div').css('z-index', '100');
});
$('.controlOverlay').mouseleave(function(){
	$(this).parent('div').css('z-index', '1');
});

上に示すように、Hoverでは要素が一番前に露出し、カーソルが他の位置に移動すると、他の通常の要素と同じz-indexに再び変更されます.
これにより、アクティビティに応じて消えたり、移動したり、使用したりすることができます.

どうしよう。

大したことはないと思う人もいるかもしれませんが、TOYプロジェクトや学校や学院で課題用プロジェクターをやっている人は、それで一日中頭が痛いかもしれません.△私は以前これを使って時間を無駄にしていました.
htmlをよく見ると、mapに相当する領域があり、しかも一つ一つ何かを探していると、何なのかわからないdivがたくさん見つかります.カニの中には私たちが作ったマークとか、overlayとかの要素が入っていて、よく見ないと何なのか分かりません.私たちが作った友达は上位divに囲まれているからです.

よく見ると、私たちが作ったコンテンツはこのエリア内にあり、指定された座標上に置かれています.それらは包まれているので、その中のコンテンツ関連要素を操作しても受け入れられません.
したがって,これらのトップクラスのdiv友人をうまく利用すれば,多くの例を閲覧することなくKaoMapカスタマーセンターに一つ一つ質問することができ,ほとんどのことが実現できる.