検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JSとAmapを使って位置マーキング機能を実装する方法

JSとAmapを使って位置マーキング機能を実装する方法

PHPz
PHPzオリジナル
2023-11-21 13:26:061559ブラウズ

JSとAmapを使って位置マーキング機能を実装する方法

JS と Amap を使用して位置マーキング機能を実装する方法

位置マーキング機能は、Web アプリケーションの一般的な要件です。 、ユーザーが表示して見つけるのに便利です。この記事では、JavaScript と Amap API を使用してこの機能を実装する方法と、具体的なコード例を紹介します。

Amap は中国の大手地図サービス プロバイダーであり、その API は豊富な地図関連機能を提供します。位置マーキング機能を実装するには、まず Amap API の JavaScript ファイルを HTML ページに導入する必要があります。サンプルコードは次のとおりです。 #script

タグ Amap API の JavaScript ファイル。

key パラメータは独自の Amap API キーに置き換える必要があります。そうしないと、map 関数が正しく動作しません。 次に、位置マーキング機能を実装するための JavaScript コードを記述する必要があります。 script.js

ファイルでは、次の手順を実行できます。

マップ コンテナーを作成します。

AMap.Map()
    関数を使用してマップ コンテナーを作成します。マップ コンテナーを作成し、コンテナーの ID と初期設定を次のように指定します。
  1. <pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;地点标记示例&lt;/title&gt; &lt;style&gt; #map { width: 100%; height: 600px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt; &lt;script src=&quot;https://webapi.amap.com/maps?v=1.4.15&amp;key=您的高德地图API密钥&quot;&gt;&lt;/script&gt; &lt;script src=&quot;https://webapi.amap.com/ui/1.0/main.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre>
    2. ロケーション マーカーを追加します。
AMap.Marker()
    関数を使用して、以下に示すように、位置マーカーを指定し、マークの位置とその他の属性を指定します。
  1. <pre class='brush:javascript;toolbar:false;'>var map = new AMap.Map('map', { center: [116.397428, 39.90923], // 地图中心点的经纬度坐标 zoom: 13 // 地图缩放级别 });</pre>
    2. 位置マークのスタイルを設定します。
AMap.Marker
    クラス
  1. 次のようにマーカーのアイコン スタイルを設定するメソッド: 
    var marker = new AMap.Marker({
  position: [116.397428, 39.90923], // 标记位置的经纬度坐标
  title: '北京市', // 标记的名称
  map: map // 标记所属的地图对象
});
    上記のコードは、Amap によって提供される青色のマーカー アイコンをスタイルとして使用します。位置マーカーの。
情報フォームの追加:

AMap.InfoWindow

クラスを通じて情報フォームを作成し、場所に関する詳細情報を表示できます。サンプル コードは次のとおりです: 
  1. marker.setIcon('https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png');
    上記のコードでは、最初に情報フォームを作成し、次に位置マーカーのクリック イベントを追加します。ユーザーがマーカーをクリックすると、情報フォームがマークした位置に が表示されます。
    2. 上記の手順により、地図上に位置マーカーを追加し、クリックすると詳細情報が表示される機能を実現できます。完全なサンプル コードは次のとおりです。 
var infoWindow = new AMap.InfoWindow({
  content: '这是北京市的详细信息', // 信息窗体的内容
  offset: new AMap.Pixel(0, -30) // 信息窗体相对于地点标记的偏移量
});

// 给地点标记添加点击事件，点击标记时显示信息窗体
marker.on('click', function() {
  infoWindow.open(map, marker.getPosition());
});

上記のコードを

script.js

ファイルとして保存し、前の HTML コードと一緒に実行すると、位置マーカー付きの地図が表示されます。マークをクリックすると詳細情報を記載した情報フォームが表示されます。

実際のアプリケーションでは、特定のニーズに応じて地図の中心点、ズーム レベル、マーカーの位置とスタイル、情報フォームの内容とスタイルを調整することで、カスタマイズされた位置マーキング機能を実現できます。 . .

以上がJSとAmapを使って位置マーキング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html map JS 事件
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JS と Baidu Maps を使用して Web ページに地図を表示する方法次の記事：JS と Baidu Maps を使用して Web ページに地図を表示する方法

関連記事

続きを見る