高徳地図Web初級

概要
プロジェクトを開発する過程で、いくつかのビジネスシーンで位置決めを使用する必要があるため、高徳地図などのサードパーティの地図を参照する必要があります.以下は使用中の心得です.
導入
高徳地図を受け取るときは、以下のscriptを導入する必要があります.現在のscriptをルートindexに導入することに注意してください.htmlページでは、このようにしてこそ、高徳地図が正しくロードする.

<script src="//webapi.amap.com/maps?v=1.4.15&key=    key "></script>

地図インスタンスの作成
    AMap.マップ(arg 1,arg 2)は、arg 1が地図容器のIDである、arg 2が地図の配置項目である.インスタンスゲート

let mAmapInstance = new AMap.Map('element_container_id', {
                    resizeEnable: true,
                    zoom: 10,
                    lang: 'ch",
                });

オーバーライドの作成
高徳地図の使用では、カバーは不可欠なカバー転送ドアである.

//create
let mMarker = new AMap.Marker({
                                content: "
this is market content
",
                                position: new AMap.LngLat("lng", "lat"),
                            });
// add map
mAmapInstance.add(mMarker);
//show 
mAmapInstance.setFitView();

オーバーライドの更新
いくつかの操作を行うと、カバーの内容または位置またはレベルを更新する必要があります.

    mMarker.setContent("
this is update content
");
    mMarker.setPosition(["lng", "lat"]);
    mMarker.setzIndex(101)//    100

被覆物が中心にある
あるカバーを中心にしたいとき現在のlng,latは被覆物の緯度である

mAmapInstance.setCenter(["lng", "lat"]);
mAmapInstance.setZoom(13)

上書き内容クリックイベント
複雑な業務を処理する場合、カバーの内容は多く、コンテンツのクリックイベントを操作することは避けられないが、高徳地図のAPIにはタグ全体に対するイベント処理しか持たない.コンテンツのローカルクリックをどのように処理するかは、私たちが関心を持っているコンテンツです.

 mMarker.setContent("
-click" data-item-data="itemData">click me
");

カバーの内容をクリックし、カバーをクリックするデータを入力すると、クリック時間を他の形式で処理する.

document.getElementById("element_container_id").addEventListener("click", function (e) {
     let contentClassName="item-click";//     class(   )
     let className = e.target.className;//       className
     let data = e.target.getAttribute("data-item-data");//       data-item-data   
     
     if(className===contentClassName){
         //  item-click        
     }
})

終わりの言葉
以上が、高徳地図で用いるインスタンス作成、オーバレイ作成、オーバレイに関する内容である.