JS と Baidu Maps を使用してカスタムの位置マーカーを地図に追加する方法

JS と Baidu Map を使用して地図にカスタム位置マーカーを追加する機能を実装する方法

はじめに: Baidu Map は非常によく使用される地図サービスです。は、カスタム プレイス マーカーの追加など、豊富なマップ プレゼンテーションとインタラクティブな機能を提供します。 JS と Baidu Map API を使用すると、地図上にカスタムの位置マーカーを追加する機能を簡単に実装できます。具体的なコード例は次のとおりです:

ステップ 1: 準備

1. まず、以下に示すように、Baidu Map API ファイルを HTML ファイルにインポートします。

   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>

   ログイン後にコピー

2. ページ内にマップ コンテナーの div 要素を作成し、幅と高さを指定します。以下に示すように:

   <div id="map" style="width:800px;height:600px;"></div>

   ログイン後にコピー

3. 以下に示すように、ボタンまたはその他のイベント トリガー要素を追加して、位置マーカーを追加する機能をトリガーします:

   <button id="addMarkerBtn">添加标记</button>

   ログイン後にコピー

ステップ 2: マップ関数とマーカー関数を追加する

1. JS でマップ オブジェクトを次のように初期化します:

   var map = new BMap.Map("map");              // 创建地图实例
   var point = new BMap.Point(116.404, 39.915); // 创建一个初始坐标点
   map.centerAndZoom(point, 15);               // 初始化地图，设置中心点和缩放级别
   map.addControl(new BMap.NavigationControl());  // 添加平移缩放控件
   map.addControl(new BMap.ScaleControl());       // 添加比例尺控件

   ログイン後にコピー

2. マップ クリック イベントを追加 (使用)以下に示すように、マップをクリックしてプレイス マーカーを追加します。

   map.addEventListener("click", function(e) {
    var point = e.point; // 获取点击的坐标点
    var marker = new BMap.Marker(point); // 创建新的地点标记
    map.addOverlay(marker); // 将标记添加到地图上
   });

   ログイン後にコピー

3. 以下に示すように、マップ クリック イベントをトリガーするために使用されるボタン クリック イベントを追加します。

   var addMarkerBtn = document.getElementById("addMarkerBtn");
   addMarkerBtn.addEventListener("click", function() {
    map.addEventListener("click", function(e) {
        var point = e.point; // 获取点击的坐标点
        var marker = new BMap.Marker(point); // 创建新的地点标记
        map.addOverlay(marker); // 将标记添加到地图上
    });
   });

   ログイン後にコピー

ステップ 3: 効果をテストする
上記のコードを保存し、ブラウザで HTML ファイルを開くと、カスタム位置マーカーを追加する機能を備えた地図ページが表示されます。地図上の任意の場所をクリックすると、新しい位置マーカーが地図上に表示されます。

注:

• Baidu Map API を使用する前に、Baidu Map Open Platform から API キーを申請し、コード内の「Your Baidu Map API Key」を置き換える必要があります。 」。
• 上記のコードは簡単な例であり、実際のアプリケーションでは、位置マークのスタイルや情報内容をカスタマイズする必要があります。

概要:
上記の手順により、JS と Baidu Map API を使用して、カスタムの位置マーカーを地図に追加する機能を実装できます。これは、特定の場所をマークする必要がある Web サイトまたはアプリケーションに役立ちます。この記事のコード例が役立つことを願っています。

以上がJS と Baidu Maps を使用してカスタムの位置マーカーを地図に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。