ホームページ > 記事 > ウェブフロントエンド > JS と Baidu Maps を使用してカスタムの位置マーカーを地図に追加する方法
JS と Baidu Map を使用して地図にカスタム位置マーカーを追加する機能を実装する方法
はじめに: Baidu Map は非常によく使用される地図サービスです。は、カスタム プレイス マーカーの追加など、豊富なマップ プレゼンテーションとインタラクティブな機能を提供します。 JS と Baidu Map API を使用すると、地図上にカスタムの位置マーカーを追加する機能を簡単に実装できます。具体的なコード例は次のとおりです:
ステップ 1: 準備
まず、以下に示すように、Baidu Map API ファイルを HTML ファイルにインポートします。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>
ページ内にマップ コンテナーの div 要素を作成し、幅と高さを指定します。以下に示すように:
<div id="map" style="width:800px;height:600px;"></div>
以下に示すように、ボタンまたはその他のイベント トリガー要素を追加して、位置マーカーを追加する機能をトリガーします:
<button id="addMarkerBtn">添加标记</button>
ステップ 2: マップ関数とマーカー関数を追加する
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()); // 添加比例尺控件
マップ クリック イベントを追加 (使用)以下に示すように、マップをクリックしてプレイス マーカーを追加します。
map.addEventListener("click", function(e) { var point = e.point; // 获取点击的坐标点 var marker = new BMap.Marker(point); // 创建新的地点标记 map.addOverlay(marker); // 将标记添加到地图上 });
以下に示すように、マップ クリック イベントをトリガーするために使用されるボタン クリック イベントを追加します。
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 ファイルを開くと、カスタム位置マーカーを追加する機能を備えた地図ページが表示されます。地図上の任意の場所をクリックすると、新しい位置マーカーが地図上に表示されます。
注:
概要:
上記の手順により、JS と Baidu Map API を使用して、カスタムの位置マーカーを地図に追加する機能を実装できます。これは、特定の場所をマークする必要がある Web サイトまたはアプリケーションに役立ちます。この記事のコード例が役立つことを願っています。
以上がJS と Baidu Maps を使用してカスタムの位置マーカーを地図に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。